Menus display lists of interactive items. They can be triggered in multiple ways such as hover, click, right click, etc.

Menu Intro

Menus can be displayed on top of another surface, and only one menu can be active on a screen at any given time.

Menu Anatomy
  1. Menu item
  2. Menu container
  3. Section heading
  4. Icon
  5. Secondary label
  6. Separator
  7. Container elevation
Menu Variations

Placement of the menu in relation to the trigger can be specified. The menu automatically adjusts to the viewport if no placement is specified.

Menu Placement

Menu has four states — hovered, focused, selected and selected with hover.

Menu States

A menu can be activated via right click on desktop, on hover, or on click or tap.

Menu Activation Behavior

Menus can be activated through several types of components including icon buttons, text links, buttons and inputs. The Goldman Sachs design system offers some composite components with menu included such as Dropdown and Select.

Menus can contain sub-menus. Having more than two levels is not recommended.

Menu Submenu

A scrollbar should appear when the number of items extends beyond the height of the menu.

Menu Scrollbar
Menu Sizes

Menus can be displayed in large, medium and small sizes.

When an input is tapped, the screen re-orients automatically so that the menu is centered in the viewport. This ensures that menus do not get cut off by appearing outside of the viewport. Tap off to dismiss

Menu Mobile Positioning

Simple contextual menus can be used.

Menu Mobile Context
  • Menus should persist until the user has made a selection or clicked outside the menu.
  • Menus are self-dismissing. Once a selection has been made it disappears.