Dropdown Examples <> show code
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
</div>
</div>
How to use
Dropdown functionality can be added to both a a and button elements which have the .btn class.
- Be sure you’ve loaded the Bootstrap JavaScript.
Example
Dropdown Mega Menus <> show code
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown megamenu
</button>
<div class="dropdown-menu dropdown-megamenu">
<div class="row">
<div class="col-md-4">
<span class="title">Classic</span>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
</div>
<div class="col-md-4">
<span class="title">Typography</span>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
</div>
<div class="col-md-4">
<span class="title">Elements</span>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
<a href="#" class="dropdown-item">Mega Link</a>
</div>
</div>
</div>
</div>
How to use
- add .dropdown-megamenu with .dropdown-menu to get megamenu functionality
Example
Alignment <> show code
<div class="dropdown btn-group">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right aligned Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
<a class="dropdown-item" href="#">Dropdwon Link</a>
</div>
</div>
how to use
- Use .dropdown-menu-right with .dropdown-menu
Example
Contextual Button Dropdowns <> show code
<div class="dropdown btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
...
</div>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
primary
</button>
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
success
</button>
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
warning
</button>
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Danger
</button>
</div>
how to use
- Use class .btn-secondary .btn-primary .btn-success .btn-warning .btn-danger with .dropdown-toggle to get different contextual class property
Example