Bootstrap Dropdown (Dropdown Menu)

Description

With the Dropdown JavaScript plugin, you can create dropdown menus on any object in Bootstrap. Full support for creating dropdown menus is provided in navigation bars and navigation (tabs and pills).

What is Required to Use This Plugin

You must include the jquery.js and bootstrap-dropdown.js files. Both files are located in the twitter-bootstrap-v2/docs/assets/js folder. Then you can invoke the dropdown menu via JavaScript. The following example demonstrates how to do this.

Example

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <a class="brand" href="#">tutorialpro</a>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li class="dropdown" id="accountmenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">HTML5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
    <h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

In the above example, it demonstrates how to create a dropdown menu on a navigation bar using the JavaScript plugin.

You can also apply the Dropdown JavaScript plugin on navigation (tabs and pills). The following example demonstrates how to do this.

Example

<ul class="nav nav-pills">
    <li class="dropdown all-camera-dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

Tutorials <b class="caret"></b> </a> <ul class="dropdown-menu"> <li data-filter-camera-type="all"><a data-toggle="tab" href="#">HTML5</a></li> <li data-filter-camera-type="Alpha"><a data-toggle="tab" href="#">PHP</a></li> <li data-filter-camera-type="Zed"><a data-toggle="tab" href="#">MySQL</a></li> <li data-filter-camera-type="Bravo"><a data-toggle="tab" href="#">JavaScript</a></li>

</ul> </li></ul> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>

Click here to download all HTML, CSS, JS, and image files used in this tutorial.