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>