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>

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.

<View gap={3}>
  <MenuItem>Edit message</MenuItem>

  <MenuItem
    startSlot={
      <Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png" />
    }
    endSlot={
      <Badge size="small" color="danger">
        2
      </Badge>
    }
  >
    Open profile
  </MenuItem>
</View>

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, startIcon overrides startSlot property. Both of them can't be displayed simultaneously.

<MenuItem startIcon={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="title-3">Getting started</Text>
  <MenuItem.Aligner>
    <View gap={1}>
      <MenuItem size="small">Overview</MenuItem>
      <MenuItem size="small">Installation</MenuItem>
    </View>
  </MenuItem.Aligner>
</View>