## Dropdown Menu

One of the most complete bootstrap admin templates!

Toggle Code!

##### 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>

Basic Bootstrap Dropdown! You are currently viewing advanced dropdown menus. To see more basic bootstrap options of dropdown, click here .
Button Dropdowns! You are currently viewing advanced dropdown menus. To see basic variations of button dropdown, click here .