Menu item

<View gap={1} width="300px" maxWidth="100%">
  <MenuItem endSlot="NL" roundedCorners={true} selected={true}>
    Dutch
  </MenuItem>
</View>

By default, MenuItem is an action element that renders its children.

<MenuItem>Edit profile</MenuItem>

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

<MenuItem color="critical">Delete article</MenuItem>

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

<MenuItem color="neutral" selected>
  Inbox
</MenuItem>

MenuItem can be used for pickers or selection menus and supports selected property for that case. At the same time, it can also be disabled for user selection.

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

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

<MenuItem size="large">Edit profile</MenuItem>

MenuItem supports responsive syntax for its size property, which means you can change its size based on the viewport.

<MenuItem size={{ s: "small", m: "medium", l: "large" }} onClick={() => {}}>
  Sign in
</MenuItem>

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

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

Since one of the most frequently used scenarios for the startSlot is to use it for displaying icons - it's supported out of the box. When used, icon overrides startSlot property. Both of them can't be displayed simultaneously.

<MenuItem icon={IconZap}>Edit message</MenuItem>

Whenever you use MenuItem as a standalone component, you can enable its border-radius with roundedCorners property.

<MenuItem roundedCorners>Edit message</MenuItem>

MenuItem supports responsive syntax for its roundedCorners property, which means you can change it based on the viewport size. That's helpful when you have less space for your menu items on mobile screen and want to make them full-width.

<MenuItem roundedCorners={{ s: false, m: true }} selected onClick={() => {}}>
  Sign in
</MenuItem>

When using MenuItem alonside section titles you would usually want to align the MenuItem content visually. In this case, you can use 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">Overview</MenuItem>
      <MenuItem size="small">Installation</MenuItem>
    </View>
  </MenuItem.Aligner>
</View>