Servage Magazine

Dropdown menus are known from many websites that make complex menu structures and page hierarchies available to users via one or multiple levels of dropdowns. They are furthermore also often used in a convenient way to hide extended or advanced functionality, yet making it available quickly upon request.

In menus the dropdowns are usually built into the overall design of the header, or other part of the page the menu is embedded into. However, with many websites moving towards a more app-like interface, and with the rise of Bootstrap, the typical button-style triggers for dropdown menus have become widely used.

Button-triggered dropdown menus are a great way to make functionality available without cluttering the interface. Bootstrap allows you to create such a dropdown menu quickly and easily and with lots of variations. You can use sections, dividers, icons and even multiple levels of dropdown menus if needed.

Bootstrap dropdown example

The following is example HTML code to create a dropdown with Bootstrap. Remember that the Bootstrap library needs to be included in your page before this code can work. Read more in the Getting Started section of Bootstrap on how to include it.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="myDropdown" data-toggle="dropdown" aria-expanded="true">
    Dropdown Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="myDropdown">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
  </ul>
</div>

The code above consists of an HTML button element with data attributes for triggering the dropdown menu. That means the button is visible to the viewer, while the rest of the code remains hidden. I.e. the “ul” list element which acts as a wrapper for the dropdown menu is not shown by default, but only after the dropdown trigger (the button element) is engaged by the user.

You can override this to do whatever you need it to, meaning you can use whatever trigger element you want, and also show/hide the dropdown based on completely different actions if needed. However, the most obvious and well adopted version of a dropdown is the one where clicking or hovering a trigger button shows the menu.

Dropdown menu elements

Most dropdown menus consist of default link items, but you can also add other elements to structure your menu better.

// Add a header in between links (good for grouping)
<li role="presentation" class="dropdown-header">Dropdown header</li>

// Add a divider line between links (good at the end of a group)
<li role="presentation" class="divider"></li>

// Disable a menu item (good to show locked/premium features)
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

The code above consists of examples that are native in Bootstrap, so they can be used out of the box.

Like with most other elements on a website, dropdown menus can be used good and bad. Make sure you consider carefully when to hide functionality behind a dropdown and when to expose it directly. If the underlying features are important enough, maybe they deserve an own button instead?