Drop-down Menus

Bootstrap makes it easy to create dropdown menus that toggle on click.

Basic Dropdown

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else</a></li>
    </ul>
</div>

Key Elements

• .dropdown — wrapper class
• data-toggle="dropdown" — enables the toggle behaviour (requires Bootstrap JS)
• .caret — adds a small down arrow icon
• .dropdown-menu — the list of options

Dividers and Headers

<ul class="dropdown-menu">
    <li class="dropdown-header">Section 1</li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Section 2</li>
    <li><a href="#">Item 3</a></li>
</ul>

Dropup

<div class="dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropup <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
    </ul>
</div>

Disabled Items

<li class="disabled"><a href="#">Disabled item</a></li>