Menus

This component has been deprecated

See the Menu component in Garden's @zendeskgarden/react-dropdowns package for the latest updates.

The .c-menu component classes are used to style menus.

Basic Structure

Menus typically originate from a control (i.e. a menubar, <select> dropdown, or button). The basic BEM structure is .c-menu > .c-menu__item. A separator may be added between menu items using .c-menu__separator. The canonical HTML below illustrates a menu of options vs. a menu of navigation items.

Show/Hide Animations

Each menu connected with the buttons below is hidden and oriented with respect to a relatively positioned container. When a button is clicked, the .is-open class is added. This class applies subtle easing animation to the menu and it's connected .c-arrow (depending on the indicated position and direction). When the menu is subsequently dismissed, it eases out with a quick fade to give the user a sense of successful execution on the selected item.

Menu Modifications

Use the main settings menu to modify styling for the menus displayed throughout the page.

Toggle "RTL" to add the .is-rtl menu class.
Toggle "Custom" to view the .c-menu--custom accent override.
Toggle "Size" to apply .c-menu--sm sizing.

Menu Item Modifications

.c-menu__item--previous
.c-menu__item--header
.c-menu__item--header--icon
.c-menu__item--next
.c-menu__item .c-menu__item__meta
.c-menu__item--media .c-menu__item__meta
.c-menu__item--add

Menu Item State

Sizing

By default, a menu will expand to accommodate the width of its items. Override the menu's min-width to increase the container size. Overriding max-width can force longer items to wrap. The override for max-height is a bit different. In order for the menu to support its optional .c-arrow treatment, it must not hide overflow content. The solution is to apply both max-height and overflow-y: auto to a child <div> that contains the menu items to scroll. See the source code for the following menu examples for details.

Playground

<ul class="c-menu u-opacity-opaque u-visibility-visible u-position-static" role="menu">
  <li class="c-menu__item c-menu__item--header">The Beatles</li>
  <li class="c-menu__item c-menu__item--media" role="menuitem">
    <img class="c-menu__item--media__figure u-br-50%" src="http://placeskull.com/32/32/37B8AF">
    <div class="c-menu__item--media__body">
      <span>John</span>
      <span class="c-menu__item__meta">john@beatles.com</span>
    </div>
  </li>
  <li class="c-menu__item c-menu__item--media" role="menuitem">
    <img class="c-menu__item--media__figure u-br-50%" src="http://placeskull.com/32/32/EB6651">
    <div class="c-menu__item--media__body">
      <span>Paul</span>
      <span class="c-menu__item__meta">paul@beatles.com</span>
    </div>
  </li>
  <li class="c-menu__item c-menu__item--media" role="menuitem">
    <img class="c-menu__item--media__figure u-br-50%" src="http://placeskull.com/32/32/30AABC">
    <div class="c-menu__item--media__body">
      <span>George</span>
      <span class="c-menu__item__meta">george@beatles.com</span>
    </div>
  </li>
  <li class="c-menu__item c-menu__item--media" role="menuitem">
    <img class="c-menu__item--media__figure u-br-50%" src="http://placeskull.com/32/32/F79A3E">
    <div class="c-menu__item--media__body">
      <span>Ringo</span>
      <span class="c-menu__item__meta">ringo@beatles.com</span>
    </div>
  </li>
  <li class="c-menu__separator" role="separator">
  <li class="c-menu__item c-menu__item--add" role="menuitem">Bert</li>
</ul>