Dropdown Menu

One of the most complete bootstrap admin templates!

Toggle Code!
Talk to us Settings
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>

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.