Default

A simple button designed to be placed in a menu of available options or actions.

Editable example
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem>Option 1</MenuItem>
    <MenuItem>Option 2</MenuItem>
    <MenuItem>Option 3</MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem>Option 1</MenuItem>
    <MenuItem>Option 2</MenuItem>
    <MenuItem>Option 3</MenuItem>
  </Stack>
</Card>

Best practices

1. For OptionMenu and Select use the respective OptionMenuItem and SelectOption components as they wrap this MenuItem component and provide additional component-specific behaviors.
2. Use a Separator to divide menu items into groups or to separate destructive menu items from non-destructive options.

Size

The default medium menu item should fit most cases. Use the smaller sizes for more compact menus triggered by smaller controls.

Editable example
<Card>
  <Stack gap="s" padding="s">
    <MenuItem size="xs">Extra small menu item</MenuItem>
    <Separator />
    <MenuItem size="s">Small menu item</MenuItem>
    <Separator />
    <MenuItem size="m">Medium menu item</MenuItem>
    <Separator />
    <MenuItem size="l">Large menu item</MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="s" padding="s">
    <MenuItem size="xs">Extra small menu item</MenuItem>
    <Separator />
    <MenuItem size="s">Small menu item</MenuItem>
    <Separator />
    <MenuItem size="m">Medium menu item</MenuItem>
    <Separator />
    <MenuItem size="l">Large menu item</MenuItem>
  </Stack>
</Card>

Icons and elements

To place content at the starr and end of the menu item, such as an icon, use the startElement and endElement props.

Editable example
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem startElement={<Library />}>Start element</MenuItem>
    <MenuItem endElement={<Popout />}>End element</MenuItem>
    <MenuItem startElement={<Calendar />} endElement={<ArrowRight />}>
      Both sides
    </MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem startElement={<Library />}>Start element</MenuItem>
    <MenuItem endElement={<Popout />}>End element</MenuItem>
    <MenuItem startElement={<Calendar />} endElement={<ArrowRight />}>
      Both sides
    </MenuItem>
  </Stack>
</Card>

Selection

Use the selected prop to indicate a selected menu item. If multiple items are selectable, also set the multiselect prop to true so that the correct accessibility roles and attributes are applied for multiple selection.

Editable example
() => {
  const [currentItem, setCurrentItem] = React.useState(1);
  const [multiSelect, setMultiSelect] = React.useState([1, 2]);

  const handleMultiSelect = (value) => {
    if (multiSelect.includes(value)) {
      setMultiSelect(multiSelect.filter(item => item !== value));
      return;
    }

    setMultiSelect([...multiSelect, value]);
  }

  return (
    <Card>
      <Stack gap="m" padding="s">
        <Stack gap="xs">
          <MenuItem
            selected={currentItem === 1}
            onClick={() => setCurrentItem(1)}
          >
            First item
          </MenuItem>
          <MenuItem
            selected={currentItem === 2}
            onClick={() => setCurrentItem(2)}
          >
            Second item
          </MenuItem>
          <MenuItem
            selected={currentItem === 3}
            onClick={() => setCurrentItem(3)}
          >
            Third item
          </MenuItem>
        </Stack>
        <Separator />
        <Stack gap="xs">
          <MenuItem
            multiselect
            selected={multiSelect.includes(1)}
            onClick={() => handleMultiSelect(1)}
          >
            First multiselect item
          </MenuItem>
          <MenuItem
            multiselect
            selected={multiSelect.includes(2)}
            onClick={() => handleMultiSelect(2)}
          >
            Second multiselect item
          </MenuItem>
          <MenuItem
            multiselect
            selected={multiSelect.includes(3)}
            onClick={() => handleMultiSelect(3)}
          >
            Third multiselect item
          </MenuItem>
        </Stack>
      </Stack>
    </Card>
  )
}
() => {
  const [currentItem, setCurrentItem] = React.useState(1);
  const [multiSelect, setMultiSelect] = React.useState([1, 2]);

  const handleMultiSelect = (value) => {
    if (multiSelect.includes(value)) {
      setMultiSelect(multiSelect.filter(item => item !== value));
      return;
    }

    setMultiSelect([...multiSelect, value]);
  }

  return (
    <Card>
      <Stack gap="m" padding="s">
        <Stack gap="xs">
          <MenuItem
            selected={currentItem === 1}
            onClick={() => setCurrentItem(1)}
          >
            First item
          </MenuItem>
          <MenuItem
            selected={currentItem === 2}
            onClick={() => setCurrentItem(2)}
          >
            Second item
          </MenuItem>
          <MenuItem
            selected={currentItem === 3}
            onClick={() => setCurrentItem(3)}
          >
            Third item
          </MenuItem>
        </Stack>
        <Separator />
        <Stack gap="xs">
          <MenuItem
            multiselect
            selected={multiSelect.includes(1)}
            onClick={() => handleMultiSelect(1)}
          >
            First multiselect item
          </MenuItem>
          <MenuItem
            multiselect
            selected={multiSelect.includes(2)}
            onClick={() => handleMultiSelect(2)}
          >
            Second multiselect item
          </MenuItem>
          <MenuItem
            multiselect
            selected={multiSelect.includes(3)}
            onClick={() => handleMultiSelect(3)}
          >
            Third multiselect item
          </MenuItem>
        </Stack>
      </Stack>
    </Card>
  )
}

Active

For navigation items such as pages in a sidebar, use the active prop to indicate the current page.

Editable example
() => {
  const [active, setActive] = React.useState(1);

  return (
    <Card>
      <Stack gap="xxs" padding="s">
        <MenuItem startElement={<Folder />} active={active === 1} onClick={() => setActive(1)}>
          Nav item 1
        </MenuItem>
        <MenuItem startElement={<Archive />} active={active === 2} onClick={() => setActive(2)}>
          Nav item 2
        </MenuItem>
        <MenuItem startElement={<Delete />} active={active === 3} onClick={() => setActive(3)}>
          Nav item 3
        </MenuItem>
      </Stack>
    </Card>
  )
}
() => {
  const [active, setActive] = React.useState(1);

  return (
    <Card>
      <Stack gap="xxs" padding="s">
        <MenuItem startElement={<Folder />} active={active === 1} onClick={() => setActive(1)}>
          Nav item 1
        </MenuItem>
        <MenuItem startElement={<Archive />} active={active === 2} onClick={() => setActive(2)}>
          Nav item 2
        </MenuItem>
        <MenuItem startElement={<Delete />} active={active === 3} onClick={() => setActive(3)}>
          Nav item 3
        </MenuItem>
      </Stack>
    </Card>
  )
}

Strong

Make the menu item text bolder. Use this for menus that need a stronger visual emphasis, such as primary navigation menus. Be sure to use it for all items in the menu and avoid using it on a single item among others in the same menu.

Editable example
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem>Regular menu item</MenuItem>
    <MenuItem strong>Strong menu item</MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem>Regular menu item</MenuItem>
    <MenuItem strong>Strong menu item</MenuItem>
  </Stack>
</Card>

Link

Link to a webpage using the href prop. You can also specify the target and rel for the link if you provide an href.

Editable example
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem startElement={<Popout />} href="https://qwilr.com">Link menu item</MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem startElement={<Popout />} href="https://qwilr.com">Link menu item</MenuItem>
  </Stack>
</Card>

Destructive

Use for destructive actions like deletion. Applies a red hover style to emphasize the destructiveness of the action.

Editable example
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem destructive startElement={<Delete />}>Destructive menu item</MenuItem>
  </Stack>
</Card>
<Card>
  <Stack gap="xxs" padding="s">
    <MenuItem destructive startElement={<Delete />}>Destructive menu item</MenuItem>
  </Stack>
</Card>

Accessibility

When using the selected prop MenuItems default to using the single select accessibility attributes. Remember to set the multiselect prop for menu items where more than one can be selected. This only changes the accessibility attributes to communicate that the menu items are multi select instead of single select.