CSS Components / Menus

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.

  • Using ul > li
  • Option One
  • Option Two
  • Option Three

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

  • default
  • .is-hovered
  • .is-checked
  • .is-focused
  • .is-disabled
  • .is-checked.is-disabled
  • .c-menu__item--next.is-disabled
  • .c-menu__item--previous.is-disabled
  • .c-menu__item--add.is-disabled

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.

  • Standard Menu
  • ...with a very, very, very long menu item
  • Override min-width
  • short item
  • Override max-width
  • ...in order to force a very long item to wrap
  • Override max-height
  • scroll to
  • view additional
  • menu items

Playground