Menu

Reveal a list of actions or options when triggered by a button.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Menu Parts

Structure

The expected structure and composition of the component.

Anatomy

Props

Each component part, its responsibility, and the props it exposes.

<MenuPopup>

The popup container for the menu.

Base behavior is provided by Base UI Menu. Refer to its documentation for the full API.
Name
Default
Options
`size`
`md`
`sm``md`

<MenuRadioItem>

The radio item for the menu.

Base behavior is provided by Base UI Menu. Refer to its documentation for the full API.
Name
Default
Options
`variant`
`default`
`default``alternative`

Examples

Trigger

You can pass a custom trigger element to the MenuTrigger component by using the render prop.

Icon

You can add an icon directly to the menu item.

Nested

Menu items can be nested to create a hierarchy of options.

Group

You can group menu items by using the MenuGroup component and add a label to the group by using the MenuGroupLabel component.

Radio

Let users select a single option from a set of choices with MenuRadioGroup component or multiple options with MenuCheckboxItem component.

LabelMenubar