Dropdown button

A button dropdown (menu button) always shows a list of commands when clicked, and selecting one of them performs that command immediately

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Use when:

To gather a small set of related actions or commands
The screen real estate is limited and there is no space to display every action as its own button
The actions do not have to be instantly available.

Turn a button into a dropdown toggle with some basic markup changes.

Example
HTML

<div class="dropdown">
	<button type="button" id="dropdownButton1" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Item 2, with a loooong label</a></li>
		<li class="dropdown-item disabled"><a tabindex="-1" aria-disabled="true">Item 3</a></li>
		<li class="dropdown-item"><a href="#!">Item 4</a></li>
		<li class="divider"></li>
		<li class="dropdown-item"><a href="#!">Item 5</a></li>
	</ul>
</div>
<div class="dropdown">
	<button type="button" id="dropdownButton2" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton2">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Item 2, with a loooong label</a></li>
		<li class="dropdown-item disabled"><a tabindex="-1" aria-disabled="true">Item 3</a></li>
		<li class="dropdown-item"><a href="#!">Item 4</a></li>
		<li class="divider"></li>
		<li class="dropdown-item "><a href="#!">Item 5</a></li>
	</ul>
</div>

Just add .disabled class on the main div that is wrapping the button (.dropdown), on the parent or on button (.btn) or only the attribute on the button tag.

Example
HTML

<div class="dropdown disabled">
	<button type="button" id="dropdownMenuButton2" class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-disabled="true" aria-haspopup="true" aria-expanded="false">Default button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton2">
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 1</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 2</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 3</a></li>
	</ul>
</div>
<div class="dropdown">
	<button type="button" id="dropdownMenuButton3" class="btn disabled btn-primary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-disabled="true" aria-haspopup="true" aria-expanded="false">Primary button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton3">
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 1</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 2</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Item 3</a></li>
	</ul>
</div>

Just add .btn-lg class on the button.

Example
HTML

<div class="dropdown">
	<button type="button" id="dropdownMenuButton4" class="btn btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton4">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item"><a href="#!">Item 2</a></li>
		<li class="dropdown-item"><a href="#!">Item 3</a></li>
	</ul>
</div>
<div class="dropdown">
	<button type="button" id="dropdownMenuButton5" class="btn btn-lg btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton5">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item"><a href="#!">Item 2</a></li>
		<li class="dropdown-item"><a href="#!">Item 3</a></li>
	</ul>
</div>

Drop-up

Add .dropup to open the dropdown menu above the button instead of below.

Example
HTML

<div class="dropup">
	<button type="button" id="dropdownMenuButton4" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Simple button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton4">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item"><a href="#!">Item 2</a></li>
		<li class="dropdown-item"><a href="#!">Item 3</a></li>
	</ul>
</div>

Additional examples

The following examples are also used by our Playwright CSS property assertion tests.

Add .btn-sm to the dropdown toggle button for a smaller variant.

Example
HTML

<div class="dropdown">
	<button type="button" id="dropdownButtonSm1" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButtonSm1" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item"><a href="#!">Item 2</a></li>
		<li class="dropdown-item"><a href="#!">Item 3</a></li>
	</ul>
</div>
<div class="dropdown">
	<button type="button" id="dropdownButtonSm2" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary button</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButtonSm2" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Item 1</a></li>
		<li class="dropdown-item"><a href="#!">Item 2</a></li>
		<li class="dropdown-item"><a href="#!">Item 3</a></li>
	</ul>
</div>

Dropdown button

Use when:

Single button with dropdown

Disabled

Large dropdowns

Drop-up

Additional examples

Small single-button dropdowns