Button dropdowns
A button dropdown (menu button) always shows a list of commands when clicked, and selecting one of them performs that command immediately. Read more about button dropdowns in the UX Guidelines .
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.
Default button
Primary button
<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.
<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.
<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 >
A split button is a combination of a regular button and an icon part. The labeled button part performs the command on the label, and clicking the small icon part displays a menu of alternative commands. Read more about split buttons in the UX Guidelines .
To gather a small sets of related actions or commands
The screen real estate is limited and there is no space to display every action as a separate button
One of the actions needs to be instantaneously available or is used most of the time
<div class ="btn-group btn-split" >
<button type ="button" class ="btn" > Default</button >
<button type ="button" id ="dropdownMenuButton6" class ="btn dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 5</a > </li >
</ul >
</div >
<div class ="btn-group btn-split btn-split-primary" >
<button type ="button" class ="btn" > Primary</button >
<button type ="button" id ="dropdownMenuButton7" class ="btn dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 5</a > </li >
</ul >
</div >
Just add .disabled class on the main div that is wrapping the buttons (.btn-group.btn-split) or on each button inside it.
<div class ="btn-group btn-split disabled" >
<button type ="button" class ="btn" tabindex ="-1" aria-disabled ="true" > Default</button >
<button type ="button" id ="dropdownMenuButton8" class ="btn dropdown-toggle" data-toggle ="dropdown" tabindex ="-1" aria-disabled ="true" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" tabindex ="-1" aria-disabled ="true" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 5</a > </li >
</ul >
</div >
<div class ="btn-group btn-split btn-split-primary disabled" >
<button type ="button" class ="btn btn-primary" disabled aria-disabled ="true" > Primary</button >
<button type ="button" id ="dropdownMenuButton9" class ="btn btn-primary dropdown-toggle" data-toggle ="dropdown" tabindex ="-1" aria-disabled ="true" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" tabindex ="-1" aria-disabled ="true" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 5</a > </li >
</ul >
</div >
Just add .btn-group-lg class on the main div that is wrapping the buttons (.btn-group.btn-split).
<div class ="btn-group btn-split btn-group-lg" >
<button type ="button" class ="btn" > Default</button >
<button type ="button" id ="dropdownMenuButton10" class ="btn dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 5</a > </li >
</ul >
</div >
<div class ="btn-group btn-split btn-split-primary btn-group-lg" >
<button type ="button" class ="btn btn-primary" > Primary</button >
<button type ="button" id ="dropdownMenuButton11" class ="btn btn-primary dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 5</a > </li >
</ul >
</div >
Drop-up
For the dropdown there are 2 option available, one is down (the default), and the other option is up - .dropup
<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 >
<div class ="btn-group btn-split dropup" >
<button type ="button" class ="btn" > Split button</button >
<button type ="button" id ="dropdownMenuButton8" class ="btn dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle dropdown</span >
</button >
<ul class ="dropdown-menu" role ="menu" aria-expanded ="false" aria-hidden ="true" aria-label ="Dropdown options" >
<li class ="dropdown-item" > <a href ="#!" > Action 1</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Action 2</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 3</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Action 4, with a looooong label</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Action 5</a > </li >
</ul >
</div >
Design System