Dropdown Menu
One of the most complete bootstrap admin templates!
Default Dropdown Menu
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Right Aligned Dropdown Menu
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" type="button" id="menu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Disabled Links in Menu
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu3">
<li><a href="#">Action</a></li>
<li class="disabled"><a href="#">Disabled Link</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Active Link in Menu
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu4">
<li><a href="#">Action</a></li>
<li class="active bg-primary"><a href="#">Active Link</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!-- /.dropdown -->
With Separator
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu5">
<li><a href="#">Action</a></li>
<li class="disabled"><a href="#">Disabled Link</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">More Link Here</a></li>
</ul>
</div>
<!-- /.dropdown -->
With Headers
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu6">
<li class="dropdown-header">Basic Actions</li>
<li><a href="#">Action</a></li>
<li><a href="#">Some Link</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown-header">More Actions</li>
<li><a href="#">Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Highlighted Headers
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu7">
<li class="dropdown-header bg-gray">Basic Actions</li>
<li><a href="#">Action</a></li>
<li><a href="#">Some Link</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown-header bg-gray">More Actions</li>
<li><a href="#">Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
With Icons
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu8">
<li class="dropdown-header">Basic Actions</li>
<li><a href="#"><i class="fa fa-bell-o"></i> Action</a></li>
<li><a href="#"><i class="fa fa-comment-o"></i> Some Link</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> Something else here</a></li>
<li class="dropdown-header">More Actions</li>
<li><a href="#"><i class="fa fa-diamond"></i> Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Primary Background
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu bg-primary" aria-labelledby="menu9">
<li class="dropdown-header color-gray">Basic Actions</li>
<li><a href="#">Action</a></li>
<li><a href="#">Some Link</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown-header color-gray">More Actions</li>
<li><a href="#">Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Danger Background
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu bg-danger" aria-labelledby="menu10">
<li><a href="#"><i class="fa fa-bell-o"></i> Action</a></li>
<li><a href="#"><i class="fa fa-comment-o"></i> Some Link</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> Something else here</a></li>
<li><a href="#"><i class="fa fa-diamond"></i> Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Black Background
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu bg-black" aria-labelledby="menu11">
<li><a href="#"><i class="fa fa-bell-o"></i> Action</a></li>
<li><a href="#"><i class="fa fa-comment-o"></i> Some Link</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> Something else here</a></li>
<li><a href="#"><i class="fa fa-diamond"></i> Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Gray Background
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu bg-gray" aria-labelledby="menu12">
<li><a href="#"><i class="fa fa-bell-o"></i> Action</a></li>
<li><a href="#"><i class="fa fa-comment-o"></i> Some Link</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> Something else here</a></li>
<li><a href="#"><i class="fa fa-diamond"></i> Something more here</a></li>
</ul>
</div>
<!-- /.dropdown -->
Icons on Right
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu13">
<li><a href="#">Action <i class="fa fa-bell-o icon-right"></i></a></li>
<li><a href="#">Some Link <i class="fa fa-comment-o icon-right"></i></a></li>
<li><a href="#">Something else here <i class="fa fa-clock-o icon-right"></i></a></li>
<li><a href="#">Something more here <i class="fa fa-diamond icon-right"></i></a></li>
</ul>
</div>
<!-- /.dropdown -->
Labels right
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-bars"></i> Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="menu14">
<li><a href="#">Action <span class="label label-danger icon-right">Hot</span></a></li>
<li><a href="#">Some Link</a></li>
<li><a href="#">Something else here <span class="label label-primary icon-right">New</span></a></li>
<li><a href="#">Something more here </a></li>
</ul>
</div>
<!-- /.dropdown -->
Split Button - Primary
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Split Button - Danger
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Split Button - Black - Dropup
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="btn-group dropup">
<button type="button" class="btn btn-black">Dropup</button>
<button type="button" class="btn btn-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Split Button - Warning - Dropup
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
<div class="btn-group dropup">
<button type="button" class="btn btn-warning">Dropup</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>