Menu

Usage

Use Menu to combine a list of secondary actions into single interactive area.

import React from 'react';
import { Menu, MenuItem, Divider, Text } from '@mantine/core';
import {
  GearIcon,
  ChatBubbleIcon,
  ImageIcon,
  MagnifyingGlassIcon,
} from '@modulz/radix-icons';

function Demo() {
  return (
    <Menu>
      <MenuItem icon={<GearIcon />}>Settings</MenuItem>
      <MenuItem icon={<ChatBubbleIcon />}>Messages</MenuItem>
      <MenuItem icon={<ImageIcon />}>Gallery</MenuItem>
      <MenuItem
        icon={<MagnifyingGlassIcon />}
        rightSection={
          <Text size="sm" color="gray">
            ⌘K
          </Text>
        }
      >
        Search
      </MenuItem>
      <Divider />
      <MenuItem disabled>Delete my data</MenuItem>
      <MenuItem color="red">Delete account</MenuItem>
    </Menu>
  );
}

MenuItem component

You can use Divider (renders horizontal line) and MenuItem components inside Menu. MenuItem renders button and accepts props:

• icon – icon on the left
• children – item label
• rightSection – any element, rendered on the right, for example, Badge or keyboard shortcut
• ...others – MenuItem produces button element, all other props will be spread to it, for example, onClick, style, className

<MenuItem
  icon={<GearIcon />}
  onClick={() => console.log('Hello')}
  rightSection={
    <Text size="sm" color="gray">
      ⌘K
    </Text>
  }
>
  Label
</MenuItem>

Custom control

By default menu button uses ActionIcon with horizontal dots. You can change it by setting control and controlRefProp props:

<Menu
  control={<button type="button">Button control</button>}
  controlRefProp="ref"
>
  {/* Menu items */}
</Menu>

<Menu
  control={<Button>Mantine Button</Button>}
>
  {/* Menu items */}
</Menu>

controlRefProp is the prop name with which element ref can be accessed. It defaults to elementRef as all interactive Mantine components use it to get ref. For regular html element it will be controlRefProp="ref"

Change menu position

Menu position defaults to { top: 0, left: 0 } and is set with object which contains optional top, left, bottom and right properties:

<Menu menuPosition={{ bottom: 0, right: 0 }} transition="skew-down">
  {/* Menu items */}
</Menu>

Change transition

Menu is built with Transition component. You can customize transition, timing function and duration:

<Menu
  transition="rotate-right"
  transitionDuration={100}
  transitionTimingFunction="ease"
>
  {/* Menu items */}
</Menu>

Size and shadow

You can use predefined shadows defined in theme.shadows or your own:

<Menu shadow="sm" /> // -> predefined small shadow
<Menu shadow="1px 1px 3px rgba(0, 0, 0, .1)" /> // -> custom shadow

<Menu>
  <MenuItem>Discard changes</MenuItem>
  <MenuItem>Save draft</MenuItem>
  <MenuItem color="red">Delete</MenuItem>
</Menu>

Menu has predefined sizes: xs, sm, md, lg, xl. Size prop controls menu width. You can also use number value to set width in px:

<Menu size="sm" /> // -> predefined small width
<Menu size={200} /> // -> 200px width

You can get predefined menu sizes by importing MENU_SIZES:

import { MENU_SIZES } from '@mantine/core';

Custom component as MenuItem

By default menu items render as button, to change that set component prop on MenuItem component:

// Regular anchor as MenuItem root element
<MenuItem component="a" href="https://mantine/dev" target="_blank" />

// React router link as MenuItem root element
<MenuItem component={Link} to="/hello" />

<Menu>
  <MenuItem component="a" href="https://mantine.dev">
    Mantine website
  </MenuItem>

  <MenuItem
    icon={<ExternalLinkIcon />}
    component="a"
    href="https://mantine.dev"
    target="_blank"
  >
    External link
  </MenuItem>
</Menu>

Get element ref

You can get menu control ref by passing elementRef prop to Menu component:

import React, { useRef } from 'react';
import { Menu } from '@mantine/core';

function Demo() {
  const menuControlRef = useRef();
  return <Menu elementRef={menuControlRef} />;
}

Accessibility and usability

To make component more accessible for users with screen readers set menuButtonLabel prop. Use it in case you chose control which does not include text, for example, default ActionIcon with horizontal dots icon.

Component behavior and properties:

• When menu is opened focus is trapped inside
• When menu is closed focus is moved back to menu control
• Focus inside menu is controlled with up and down arrows, tab key has no effect
• By default when menu item is clicked, menu closes, change it with closeOnItemClick prop
• Menu is closed when user clicks outside ot presses escape
• Menu control has aria-haspopup, aria-expanded, aria-controls and aria-label attributes, aria-label is defined by menuButtonLabel prop
• Menu body has menu role, aria-orientation is always set to vertical
• Menu item has menuitem role