Styleguides

Shared Assets & Docs

Menu

Dropdowns are toggleable, contextual menus for displaying lists of links. A dropdown menu is simply a <ul> with a .dropdown-menu class:

<ul class="dropdown-menu">
  <li class="dropdown-menu-content">
    More Information
  </li>
  <li><a href="#">Link 1</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 2</a></li>
</ul>

Toggleable

Here's how to make the dropdown menu toggleable:

  1. Wrap the dropdown menu with an element with a .dropdown class.
  2. Add a toggleable link with the Bootstrap-style data attribute of data-toggle="dropdown".

Notice how if you add a caret down icon, it will automatically point up while active. Pretty neat.

<div class="dropdown">
  <a href="javascript:void(0)" data-toggle="dropdown">Toggle Dropdown <i class="icon-caret-down"></i></a>
  <ul class="dropdown-menu">
    <li><a href="#">Link 1</a></li>
    <li class="divider"></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

Full Dropdown Menu

Add .full-dropdown-menu to the dropdown menu for the menu to expand its width to match its container. This works best when the container is an inline-block.

<div class="dropdown">
  <a href="javascript:void(0)" data-toggle="dropdown">Toggle Dropdown <i class="icon-angle-down"></i></a>
  <ul class="dropdown-menu full-dropdown-menu">
    <li><a href="#">Link 1</a></li>
    <li class="divider"></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>