Menus

Purpose

User needs to perform an action, and depending on space constraints or the frequency of use, the action does not need to be visible at all times.

Description

Menus provide a list of available actions and options. They’re used in dropdowns, selects, and context menus.

Basic functionality

Menus appear relative to the control or interaction that triggered the menu. Clicking an item from the menu performs the action or selects the option. For most actions, the menu should close when a menu item is clicked. If the clicked menu item is part of a set of multi-selectable options, then the menu should stay open.

Menus may have submenus, icons, dividers, category labels, and checkboxes
Menu items may change depending on the context (e.g., Mark as read vs Mark as unread)
Use dividers to group related menu items
Use submenus to separate large sets of menu items
Include keyboard shortcuts if applicable
Disable menu items rather than hiding to improve discoverability of features
Indicate submenus with a caret
Indicate dialogs with an ellipsis
Use sentence case for menu items

<ul class="dropdown-menu" role="menu">
  <li role="presentation"><a href="">Bold <span class="pull-right text-muted">Ctrl+B</span></a></li>
  <li role="presentation"><a href="">Italic <span class="pull-right text-muted">Ctrl+I</span></a></li>
  <li role="presentation"><a href="">Underline <span class="pull-right text-muted">Ctrl+U</span></a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a href="">Font <i class="icon icon-caret-right pull-right"></i></a></li>
  <li role="presentation"><a href="">Font size <i class="icon icon-caret-right pull-right"></i></a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="disabled"><a>Conditional formatting...</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a href="">Clear formatting</a></li>
</ul>

Submenus

Submenus help organize menu items.

<ul class="dropdown-menu" role="menu">
  <li role="presentation"><a href="">Submenu item <i class="icon icon-caret-right pull-right"></i></a></li>
  <li role="presentation" class="disabled"><a href="">Disabled submenu item <i class="icon icon-caret-right pull-right"></i></a></li>
</ul>

Icons

Use icons for menu items that have a common, easily recognizable icon. You don’t need an icon for every menu item, only for menu items that are more frequently used.

If you have an icon in a menu, ensure that all menu items are aligned appropriately.

<ul class="dropdown-menu has-icon" role="menu">
  <li role="presentation"><a href=""><i class="icon icon-fw icon-star dropdown-menu-icon"></i> Star</a></li>
  <li role="presentation"><a href="">Share...</a></li>
  <li class="divider" role="presentation"></li>
  <li role="presentation"><a href=""><i class="icon icon-fw icon-trash-o dropdown-menu-icon"></i> Remove</a></li>
</ul>

Form controls

Sometimes menus can contain form elements like checkboxes. Use checkboxes for both single and multi-select options. When dealing with a multi-selectable collection of checkboxes, it’s likely beneficial to keep the menu open after items are checked. Otherwise, menus should close after items are clicked.

<ul class="dropdown-menu has-icon" role="menu">
  <li class="dropdown-header">Single-select</li>
  <li role="presentation"><a href=""><i class="icon icon-fw dropdown-menu-icon"></i> 1.0</a></li>
  <li role="presentation"><a href=""><i class="icon icon-fw icon-check dropdown-menu-icon"></i> 1.5</a></li>
  <li role="presentation"><a href=""><i class="icon icon-fw dropdown-menu-icon"></i> 2.0</a></li>
  <li class="divider" role="presentation"></li>
  <li class="dropdown-header">Multi-select</li>
  <li role="presentation"><a href=""><i class="icon icon-fw icon-check dropdown-menu-icon"></i> Grid lines</a></li>
  <li role="presentation"><a href=""><i class="icon icon-fw icon-check dropdown-menu-icon"></i> Rulers</a></li>
  <li role="presentation"><a href=""><i class="icon icon-fw dropdown-menu-icon"></i> Margins</a></li>
</ul>