Выпадающие списки позволяют организовать в группу список ссылок (или кнопок) вызываемых нажатием на кнопку.

Выпадающий список состоит из двух обязательных составлюящих: кнопки и списка и обертки. Вызывающая список кнопка должна включать класс .dropdown-toggle. Список представляет собой слой с классом .dropdown-menu, в котором находится перечисление ссылок, входящих в выпадающий список. Для группировки кнопки и слоя со списком используется слой с классом .dropdown или .btn-group. Сами ссылки в выпадающем меню должны иметь класс .dropdown-item

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Primary button
	</button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
	</div>
</div>

Вы можете использовать для вызывающей список кнопки тег <a>. В этом случае используется кнопка созданная на основе ссылки, которая также должна включать в себя класс .dropdown-toggle.

<div class="dropdown">
	<a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Primary link
	</a>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
	</div>
</div>

Для офомрления выпадающего списка используются классы кнопок.

<div class="btn-group">
	<button type="button" class="btn btn-default btn-square dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
	<div class="dropdown-menu dropdown-square">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

Вы можете разделить кнопку выпадающего списка на две, используя для второй кнопки класс dropdown-toggle-split. Это позволит основной кнопке выполнить основное действие а дополнительной вызывать выпадающей списко, расширяющий возможности основной кнопки.

<div class="btn-group">
	<button type="button" class="btn btn-default">Default</button>
	<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

Вы можете использовать классы .btn-xs .btn-sm .btn-lg для изменения размеров выпадающих списков.

<div class="btn-group">
	<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Large button
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>
<div class="btn-group">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Normal button
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>
<div class="btn-group">
	<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Small button
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>
<div class="btn-group">
	<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Extra small button
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

Если вам требуется чтобы список раскрвался вверх, используйте для оберточного слоя дополнительный класс .dropup.

<div class="btn-group dropup">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Dropup
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

Вы можете в выпадающем списке использовать вместо ссылок кнопки. Они должны содержать класс .dropdown-item.

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Dropdown
	</button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
		<button class="dropdown-item" type="button">Action</button>
		<button class="dropdown-item" type="button">Another action</button>
		<button class="dropdown-item" type="button">Something else here</button>
	</div>
</div>

Если необходимо выравнивать меню по правому краю вызывающей кнопки, то необходимо для списка использовать дополнительный класс .dropdown-menu-right.

<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	This dropdown's menu is right-aligned
	</button>
	<div class="dropdown-menu dropdown-menu-right">
		<button class="dropdown-item" type="button">Action</button>
		<button class="dropdown-item" type="button">Another action</button>
		<button class="dropdown-item" type="button">Something else here</button>
	</div>
</div>

Для разделения элементов списка используйте слой с классом .dropdown-divider.

<div class="dropdown-menu">
	<a class="dropdown-item" href="#">Action</a>
	<a class="dropdown-item" href="#">Another action</a>
	<a class="dropdown-item" href="#">Something else here</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Separated link</a>
</div>

Вы можете использовать шрифтовые иконки для оформления ссылок в выпадающем списке.

<div class="dropdown-menu">
	<a class="dropdown-item" href="#"><i class="fa fa-car" aria-hidden="true"></i>Action</a>
	<a class="dropdown-item" href="#"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>Another action</a>
	<a class="dropdown-item" href="#"><i class="fa fa-diamond" aria-hidden="true"></i>Something else here</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#"><i class="fa fa-flask" aria-hidden="true"></i>Separated link</a>
</div>

Используйте класс .dropdown-header для заголовков размещенных в выпадающем списке.

<div class="dropdown-menu">
	<h6 class="dropdown-header">Dropdown header</h6>
	<a class="dropdown-item" href="#">Action</a>
	<a class="dropdown-item" href="#">Another action</a>
</div>

Используйте класс .disabled для обозначения деактивированного элемента выпадающего списка.

<div class="dropdown-menu">
	<a class="dropdown-item" href="#">Regular link</a>
	<a class="dropdown-item disabled" href="#">Disabled link</a>
	<a class="dropdown-item" href="#">Another link</a>
</div>

Выпадающие списки

Выпадающий список на основе тега <button>

Выпадающий список на основе тега <a>

Оформление выпадающего списка

Выпадающий список с разделителем

Выпадающие списки разных размеров

Раскрывающийся вверх список

Кнопки в выпадающем меню

Выравнивание выпадающего списка по правому краю кнопки

Разделитель в выпадающем списке

Иконки в выпадающем списке

Заголовок в выпадающем списке

Dropdown header

Деактивация элемента выпадающего списка