Bootstrap

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://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/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

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.
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
Back to top button