Bootstrap 3 Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin

Example

       
        <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <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>

Try Your Self

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

Example

       
        <div class="dropup">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropup
                        <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <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>

Try Your Self

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.


    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">    
            ...  
    </ul>

Headers

Add a header to label sections of actions in any dropdown menu.

Example

       
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">    
                ...    
                <li class="dropdown-header">Dropdown header</li>    
                ...  
        </ul>

Try Your Self

Divider

Add a divider to separate series of links in a dropdown menu.

Example

           
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">    
            ...    
            <li role="separator" class="divider"></li>    
            ...  
        </ul>

Try Your Self

Disabled menu items

Add .disabled to a <li> in the dropdown to disable the link.

Example

           
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">    
                <li><a href="#">Regular link</a></li>    
                <li class="disabled"><a href="#">Disabled link</a></li>    
                <li><a href="#">Another link</a></li>
        </ul>

Try Your Self

Previous Next