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

<!--Menu-->
<div class="dropdown-menu">
  <a class="dropdown-item" href="#"
    >Bold <span class="float-right text-muted ml-4">Ctrl+B</span></a
  >
  <a class="dropdown-item" href="#"
    >Italic <span class="float-right text-muted ml-4">Ctrl+I</span></a
  >
  <a class="dropdown-item" href="#"
    >Underline <span class="float-right text-muted ml-4">Ctrl+U</span></a
  >
  <div role="separator" class="dropdown-divider"></div>
  <a class="dropdown-item" href="#"
    >Font
    <span class="float-right mt-n1"
      ><i class="material-icons">chevron_right</i></span
    ></a
  >
  <a class="dropdown-item" href="#"
    >Font size
    <span class="float-right mt-n1"
      ><i class="material-icons">chevron_right</i></span
    ></a
  >
  <div role="separator" class="dropdown-divider"></div>
  <a class="dropdown-item disabled" href="#">Conditional formatting...</a>
  <div role="separator" class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Clear formatting</a>
</div>

Submenus

Submenus help organize menu items.

Submenu

Example HTML usage:

<!--Submenu-->
<div class="dropdown-menu">
  <a class="dropdown-item" href="#"
    >Submenu item
    <span class="float-right mt-n1"
      ><i class="material-icons">chevron_right</i></span
    ></a
  >
  <a class="dropdown-item disabled" href="#"
    >Disabled item
    <span class="float-right mt-n1"
      ><i class="material-icons">chevron_right</i></span
    ></a
  >
</div>

Headers

Example HTML usage:

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>