Menu

The Menu component displays a list of choices on a temporary surface.

<Menu
  items={[
    { label: "Cordilleran Flycatcher" },
    { label: "Golden-crowned Warbler" },
    { label: "California Gnatcatcher" },
  ]}
/>

Features

The Menu component is a versatile component that can be used in a variety of ways.

Interactive Items

You can make menu items interactive by providing an onClick prop.

<Menu
  items={[
    { label: "Yellow Rail", onClick: console.info },
    { label: "Arctic Tern", onClick: console.info },
    { label: "Mallard", onClick: console.info },
  ]}
/>

Link Items

Menu items can be rendered as links by using the as prop.

<Menu
  items={[
    { as: PlainLink, label: "White-collared Seedeater", href: "/internal" },
    { as: PlainLink, label: "Hepatic Tanager", href: "https://codedazur.com" },
  ]}
/>

Trailing Elements

You can add trailing elements to menu items.

<Menu
  items={[
    { label: "Northern Gannet", trailing: <Icon.ChevronRight /> },
    { label: "Bar-tailed Godwit", trailing: <Icon.ChevronRight /> },
    { label: "Red-tailed Tropicbird" },
  ]}
/>

Disabled Items

You can disable menu items to prevent user interaction even they would otherwise be interactive.

<Menu
  items={[
    { label: "Yellow-green Vireo", onClick: console.info },
    { label: "Pectoral Sandpiper", onClick: console.info, disabled: true },
    { label: "Black Vulture", onClick: console.info },
  ]}
/>

Anatomy

1.SurfaceThe menu is a `Surface` component.

2.ItemEach item in the menu is a `Surface` component.

3.LabelThe label is the text content of the menu item.

4.TrailingThe trailing element is displayed after the label.

Reference

The Menu component inherits all of the props from the Surface component and adds the following props.

Name	Type	Default	Description
`items`	`MenuItemProps[]`	`[]`	The items to display in the menu.

MenuItem Props

Each item in the items array can have the following props. It inherits all of the props from the Surface component.

Name	Type	Default	Description
`label`	`ReactNode`	-	The content of the menu item.
`trailing`	`ReactNode`	-	Element to display after the menu item content.
`disabled`	`boolean`	`false`	Whether the menu item is disabled.

Tokens

Key	Default Value
`menu.surface.base.backgroundColor`	`var(--_1i4ikbk10)`
`menu.surface.base.borderRadius`	`var(--gpqiqdw)`
`menu.surface.base.borderWidth`	`0`
`menu.surface.base.borderStyle`	`solid`
`menu.surface.base.borderColor`	`var(--_1i4ikbkx)`
`menu.item.base.paddingLeft`	`var(--gpqiqd9)`
`menu.item.base.paddingTop`	`var(--gpqiqd7)`
`menu.item.base.paddingRight`	`var(--gpqiqd9)`
`menu.item.base.paddingBottom`	`var(--gpqiqd7)`
`menu.item.base.borderRadius`	`0`
`menu.item.base.backgroundColor`	`var(--_1i4ikbk10)`
`menu.item.base.gap`	`var(--gpqiqd9)`
`menu.item.base.color`	`var(--_1i4ikbkv)`
`menu.item.base.:hover.backgroundColor`	`color-mix(in srgb, transparent 95%, var(--_1i4ikbkv) 5%)`
`menu.item.base.:hover.color`	`var(--_1i4ikbkv)`
`menu.item.base.:focus-visible.backgroundColor`	`color-mix(in srgb, transparent 95%, var(--_1i4ikbkv) 5%)`
`menu.item.base.:focus-visible.color`	`var(--_1i4ikbkv)`
`menu.item.base.:active.backgroundColor`	`color-mix(in srgb, transparent 95%, var(--_1i4ikbkv) 5%)`
`menu.item.base.:active.color`	`var(--_1i4ikbkv)`
`menu.label.base.font`	`var(--_1i4ikbk28)`

Last updated on January 12, 2026

MailToLink Pagination