Menu

View on GitHub

Introduction

Evergreen exports multiple component to help create menus. All components are accessible through the Menu component.

  • Menu: menu wrapper, helps with focus management.
  • Menu.Item: single menu item button. Contains labels and icons.
  • Menu.Group: group menu items together.
  • Menu.Divider: menu divider to divide menu groups visually.
  • Menu.OptionsGroup: menu group which works like a radio group.

Focus management

The Menu component is used to help with focus management.

  • Arrow down on a button will bring focus inside the popover.
  • Arrow keys within the menu will cycle through all of the menu items and skip disabled items.
  • The Home key (fn + arrow left) will go to the first item.
  • The End key (fn + arrow right) will go to the last item.

Menu without icons

All examples below will show the Menu inside of a Popover. It is important to understand the Menu component by itself does not manage a dropdown interaction.

<Menu>
  <Menu.Group>
    <Menu.Item>Share...</Menu.Item>
    <Menu.Item>Move...</Menu.Item>
    <Menu.Item>Rename...</Menu.Item>
  </Menu.Group>
  <Menu.Divider />
  <Menu.Group>
    <Menu.Item intent="danger">Delete...</Menu.Item>
  </Menu.Group>
</Menu>
code Hide code

Using onSelect handlers

Menu items support a onSelect handler that is triggered on click and enter + space key down.

<Menu.Item
  onSelect={() => toaster.notify('Hello world')}
>
  Say hello
</Menu.Item>
code Hide code

Dropdown menu

<Popover
  position={Position.BOTTOM_LEFT}
  content={
    <Menu>
      <Menu.Group>
        <Menu.Item
          onSelect={() => toaster.notify('Share')}
        >
          Share...
        </Menu.Item>
        <Menu.Item
          onSelect={() => toaster.notify('Move')}
        >
          Move...
        </Menu.Item>
        <Menu.Item
          onSelect={() => toaster.notify('Rename')}
          secondaryText="⌘R"
        >
          Rename...
        </Menu.Item>
      </Menu.Group>
      <Menu.Divider />
      <Menu.Group>
        <Menu.Item
          onSelect={() => toaster.danger('Delete')}
          intent="danger"
        >
          Delete...
        </Menu.Item>
      </Menu.Group>
    </Menu>
  }
>
  <Button marginRight={16}>Without Icons</Button>
</Popover>
code Hide code

Menu with icons

The onSelect handlers are omitted for brevity.

<Popover
  position={Position.BOTTOM_LEFT}
  content={
    <Menu>
      <Menu.Group>
        <Menu.Item icon="people">Share...</Menu.Item>
        <Menu.Item icon="circle-arrow-right">Move...</Menu.Item>
        <Menu.Item icon="edit" secondaryText="⌘R">
          Rename...
        </Menu.Item>
      </Menu.Group>
      <Menu.Divider />
      <Menu.Group>
        <Menu.Item icon="trash" intent="danger">
          Delete...
        </Menu.Item>
      </Menu.Group>
    </Menu>
  }
>
  <Button marginRight={16}>With Icons</Button>
</Popover>
code Hide code

Groups with titles

The onSelect handlers are omitted for brevity.

<Popover
  position={Position.BOTTOM_LEFT}
  content={
    <Menu>
      <Menu.Group title="Actions">
        <Menu.Item icon="people">Share...</Menu.Item>
        <Menu.Item icon="circle-arrow-right">Move...</Menu.Item>
        <Menu.Item icon="edit" secondaryText="⌘R">
          Rename...
        </Menu.Item>
      </Menu.Group>
      <Menu.Divider />
      <Menu.Group title="destructive">
        <Menu.Item icon="trash" intent="danger">
          Delete...
        </Menu.Item>
      </Menu.Group>
    </Menu>
  }
>
  <Button marginRight={16}>With Group Titles</Button>
</Popover>
code Hide code

Menu option groups

The Menu.OptionsGroup is useful inside of table headers to help with sorting and filtering options.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Menu>
  <Component
    initialState={{
      selected: 'asc'
    }}
  >
    {({ state, setState }) => {
      return (
        <Menu.OptionsGroup
          title="Order"
          options={[
            { label: 'Ascending', value: 'asc' },
            { label: 'Descending', value: 'desc' }
          ]}
          selected={state.selected}
          onChange={selected => setState({ selected })}
        />
      )
    }}
  </Component>

  <Menu.Divider />

  <Component
    initialState={{
      selected: 'email'
    }}
  >
    {({ state, setState }) => {
      return (
        <Menu.OptionsGroup
          title="Show"
          options={[
            { label: 'Email', value: 'email' },
            { label: 'Phone', value: 'phone' },
            { label: 'State', value: 'state' },
            { label: 'Country', value: 'country' },
            { label: 'Type', value: 'type' }
          ]}
          selected={state.selected}
          onChange={selected => setState({ selected })}
        />
      )
    }}
  </Component>
</Menu>
code Hide code

Custom menu items

The Menu by itself offers focus management to elements inside of the component that either have [role="menuitemradio"] or [role="menuitem"].

The focus styles are currently not working in the docs, sorry for the inconvenience!

<Popover
  position={Position.BOTTOM_LEFT}
  content={
    <Menu>
      <ul>
        <li>
          <a href="#..." role="menuitem">
            Hey Evergreen,
          </a>
        </li>
        <li>
          <a href="#..." role="menuitem">
            I want custom items
          </a>
        </li>
        <hr />
        <li>
          <a href="#..." role="menuitem">
            Oh sweet
          </a>
        </li>
      </ul>
    </Menu>
  }
>
  <Button>Custom Menu Items</Button>
</Popover>
code Hide code

Menu Props

childrennode
The children of the component.

MenuItem Props

isunion = 'div'
Element type to use for the menu item. For example: `<MenuItem is={ReactRouterLink}>...</MenuItem>`
onSelectfunc = () => {}
Function that is called on click and enter/space keypress.
iconnode
The icon before the label.
childrennode
The children of the component.
secondaryTextnode
Secondary text shown on the right.
appearancestring = 'default'
The default theme only supports one default appearance.
intentenum = 'none'
The intent of the menu item.
themeobjectrequired
Theme provided by ThemeProvider.

MenuGroup Props

titlenode
Title of the menu group.
childrennode
The children of the menu group.

MenuOptionsGroup Props

titlenode
Title of the menu group.
selectedunion
The current value of the option group.
onChangefunc
Function called when selection changes.
optionsarray
List of options rendered in the group.

MenuDivider Props