Bootstrap Dropdowns

This chapter will focus on Bootstrap dropdown menus. Dropdown menus are toggleable, context menus that display links in a list format. This can be achieved through interaction with the Dropdown JavaScript Plugin.

To use dropdown menus, simply add the dropdown menu within the class .dropdown. The following example demonstrates a basic dropdown menu:

Example

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Mining</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Separate Link</a>
        </li>
    </ul>
</div>

The result is as follows:

Options

Alignment

By adding the class .pull-right to .dropdown-menu, you can align the dropdown menu to the right. The following example demonstrates this:

Example

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Mining</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Separate Link</a>
        </li>
    </ul>
</div>

The result is as follows:

Header

You can add headers to the dropdown menu label area using the class .dropdown-header. The following example demonstrates this:

Example

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Programming Languages</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Mining</a>
        </li>
        <li class="dropdown-header">Communication</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Separate Link</a>
        </li>
    </ul>
</div>

The result is as follows:

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">Dropdown Header</li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Java</a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Data Mining</a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Data Communications/Network</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">Dropdown Header</li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Separate Link</a>
    </li>
</ul>
</div>

More Examples