Home » CSS » Bootstrap » Boostrap Dropdown Menu Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

Boostrap Dropdown Menu Example

In this example we’re considering Bootstrap dropdown menus. Sometimes referred to as a pull-down menu, drop-down list, or drop-down box, a dropdown menu is a list of items that appears when clicking on a button or text selection.

For example, many programs have a “File” drop down menu at the top left of their screen. Clicking on the “File” text generates a new menu with additional options.

Bootstrap has created it’s own dropdown menu, which is normally toggleable, contextual menu for displaying lists of links in your page. Bootstrap 3 is focused in offering the basic elements in a functional manner and providing essential styling that you’ll most probably need. However, if that’s not enough for you, feel free to browse the web for even fancier designs.

1. Project Setup

The following setup is required in order to continue with this tutorial.

1.1 Boostrap Folder Structure

First, download bootstrap from here. Next, create a new HTML document and make sure you have the following folder structure in you project folder:

dropdown-1

1.2 HTML Setup

To start coding, include Bootstrap’s basic template code inside your main HTML. This will include basic HTML tags and links necessary to link Bootstrap’s libraries.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Dropdown Menu Example</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2. The Default Example

The most basic dropdown that Bootstrap offers is the one the wraps 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="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><a href="#">Separated link</a></li>
  </ul>
</div>

And this is how the dropdown looks like:

dropdown-2

3. Cases and Examples

The following section expands the default basic options of the dropdown by adding new elements to it.

3.1 Dropdown Headers

You can optionally add a header to label sections of actions in any dropdown menu.

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

The header will look like this:

dropdown-3

3.2 Dropdown Dividers

To group links, you can add a divider to separate series of links in a dropdown menu.

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

The separator will look like this:

dropdown-4

3.3 Disabled Menu Items

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  ...
  <li class="disabledr">Disabled link</li>
  ...
</ul>

The disabled link will look like this:

dropdown5

4. Did you know?

It might seem surprising, but there is also a dropup, apart from the traditional dropdown. The markup is somehow similar:

<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><a href="#">Separated link</a></li>
  </ul>
</div>

As expected the dropup would show above the button:

dropdown-6

5. Conclusion

To conclude, Bootstrap dropdown is an easy way to group links and menu items in a compact but effective way. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. If you want to override these settings, use the dedicated classes .dropdown-menu-right and .dropdown-menu-left.

6. Download

Download
You can download the full source code of this example here: Boostrap Dropdown Menu
0 0 vote
Article Rating
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x