Menu item

MenuItem renders its main area content using the children property.

<MenuItem onClick={() => {}}>Edit profile</MenuItem>

MenuItem works with both href and onClick properties. Using either will render the MenuItem as an <a> or <button> tag, respectively.

<View gap={1}>
  <MenuItem href="/" attributes={{ target: "_blank" }}>
    Getting started
  </MenuItem>

  <MenuItem onClick={() => {}}>Design tokens</MenuItem>
</View>

You can use MenuItem with all popular router solutions by wrapping it in the router's Link component.

<RouterLink href="/">
  <MenuItem>Getting started</Button>
</RouterLink>

When used for critical actions, like deleting data, you can use the critical color to change the background color of the highlight:

<MenuItem color="critical" onClick={() => {}}>
  Delete article
</MenuItem>

For menu items that don't need to grab too much attention when selected, you can use the neutral color:

<MenuItem color="neutral" selected onClick={() => {}}>
  Inbox
</MenuItem>

MenuItem can be used for pickers or selection menus and supports the selected property for that case. It can also be disabled to prevent user selection.

<View gap={3}>
  <MenuItem selected startSlot="€" onClick={() => {}}>
    Euro
  </MenuItem>
  <MenuItem disabled startSlot="$" onClick={() => {}}>
    USD
  </MenuItem>
</View>

MenuItem comes in three sizes: small, medium (default), and large, which change the spacing and dimensions of elements inside it.

<MenuItem size="large" onClick={() => {}}>
  Edit profile
</MenuItem>

MenuItem can be used to build custom menu elements since it provides startSlot and endSlot. You can use these to build various layout compositions, from simple text menus to complex notification layouts.

Open profile

2

<MenuItem
  startSlot={<Avatar src="/img/examples/avatar-3.png" size={8} />}
  endSlot={
    <Badge size="small" color="critical">
      2
    </Badge>
  }
  onClick={() => {}}
>
  Open profile
</MenuItem>

Since one of the most common uses for the startSlot is displaying icons, this is supported out of the box. When used, the icon overrides the startSlot property. Both cannot be displayed simultaneously.

<MenuItem icon={ActivityIcon} onClick={() => {}}>
  Edit message
</MenuItem>

When using MenuItem as a standalone component, you can enable its border-radius with the roundedCorners property.

<MenuItem roundedCorners onClick={() => {}}>
  Edit message
</MenuItem>

When using MenuItem alongside other text content, you usually want to align the MenuItem content visually. In this case, you can use the MenuItem.Aligner utility, which will adjust the space automatically based on the size of the MenuItem used inside it.

<View gap={2}>
  <Text variant="featured-3" weight="bold">
    Getting started
  </Text>
  <MenuItem.Aligner>
    <View gap={1}>
      <MenuItem size="small" onClick={() => {}}>
        Overview
      </MenuItem>
      <MenuItem size="small" onClick={() => {}}>
        Installation
      </MenuItem>
    </View>
  </MenuItem.Aligner>
</View>

MenuItem supports responsive syntax for the size and roundedCorners properties. Use object syntax to control their values based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<MenuItem size={{ s: "large", m: "medium" }}>Getting started</MenuItem>

• The <button> click event gets triggered on both Space and Enter key presses.
• The <a> click event gets triggered on Enter key press.