---
title: Menu
description: A list of actions in a dropdown, enhanced with keyboard navigation.

links:
  doc: https://base-ui.com/react/components/menu#api-reference
---

<ComponentPreview name="p-menu-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/menu
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="menu" title="components/ui/menu.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuLinkItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu"
```

```tsx
<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuPopup align="start" sideOffset={4}>
    <MenuItem>Profile</MenuItem>
    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Playback</MenuGroupLabel>
      <MenuItem>Play</MenuItem>
      <MenuItem>Pause</MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>
    <MenuCheckboxItem>Repeat</MenuCheckboxItem>
    <MenuCheckboxItem variant="switch">Auto save</MenuCheckboxItem>

    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Sort by</MenuGroupLabel>
      <MenuRadioGroup>
        <MenuRadioItem>Artist</MenuRadioItem>
        <MenuRadioItem>Album</MenuRadioItem>
        <MenuRadioItem>Title</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>

    <MenuSeparator />

    <MenuSub>
      <MenuSubTrigger>Add to playlist</MenuSubTrigger>
      <MenuSubPopup>
        <MenuItem>Jazz</MenuItem>
        <MenuItem>Rock</MenuItem>
      </MenuSubPopup>
    </MenuSub>
  </MenuPopup>
</Menu>
```

## API Reference

### Menu

Root component. Alias for `Menu.Root` from Base UI. Also exported as `DropdownMenu`.

### MenuTrigger

Trigger button that opens the menu. Alias for `Menu.Trigger` from Base UI. Also exported as `DropdownMenuTrigger`.

### MenuPopup

Popup container that displays the menu content. Also exported as `DropdownMenuContent`.

| Prop          | Type                                           | Default    | Description                                      |
| ------------- | ---------------------------------------------- | ---------- | ------------------------------------------------ |
| `side`        | `"top" \| "bottom" \| "left" \| "right"`       | `"bottom"` | Side of the trigger to position the popup        |
| `align`       | `"start" \| "center" \| "end"`                 | `"center"` | Alignment relative to the trigger                |
| `sideOffset`  | `number`                                       | `4`        | Distance from the trigger in pixels              |
| `alignOffset` | `number`                                       | -          | Offset along the alignment axis                  |
| `portalProps` | `Menu.Portal.Props`                            | -          | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Menu portal API |

### MenuGroup

Groups related menu items. Alias for `Menu.Group` from Base UI. Also exported as `DropdownMenuGroup`.

### MenuItem

Individual menu item. Also exported as `DropdownMenuItem`.

| Prop      | Type                          | Default     | Description                                      |
| --------- | ----------------------------- | ----------- | ------------------------------------------------ |
| `inset`   | `boolean`                     | -           | Adds left padding to align with items that have icons |
| `variant` | `"default" \| "destructive"`  | `"default"` | Controls the item styling                        |

**Using `inset`:** When mixing items with and without icons, use `inset` on icon-less items to maintain alignment:

```tsx
<MenuItem><PencilIcon /> Edit</MenuItem>
<MenuItem><TrashIcon /> Delete</MenuItem>
<MenuItem inset>Profile</MenuItem>  {/* Aligns with icon items above */}
```

### MenuLinkItem

Link menu item for navigation. **`LinkItem`** renders a native **`<a>`** when you pass **`href`**. Styled like **`MenuItem`**.

| Prop           | Type                          | Default     | Description                                      |
| -------------- | ----------------------------- | ----------- | ------------------------------------------------ |
| `inset`        | `boolean`                     | -           | Adds left padding to align with items that have icons |
| `variant`      | `"default" \| "destructive"`  | `"default"` | Controls the item styling                        |
| `closeOnClick` | `boolean`                     | `true`      | Whether the menu closes when the link is clicked |

If you were using **`MenuItem render={<Link href="..." />}`**, migrate to **`MenuLinkItem`** but **keep `render`** — do not replace it with **`href`** alone when using a router **`Link`**.

```tsx
<MenuLinkItem render={<Link href="/docs" />}>Docs</MenuLinkItem>
```

Use **`href`** only for plain anchor links:

```tsx
<MenuLinkItem href="/docs">Docs</MenuLinkItem>
```

### MenuCheckboxItem

Checkbox menu item. Also exported as `DropdownMenuCheckboxItem`.

| Prop      | Type                       | Default     | Description                                      |
| --------- | -------------------------- | ----------- | ------------------------------------------------ |
| `variant` | `"default" \| "switch"`    | `"default"` | Display style - `switch` shows a toggle switch indicator |

### MenuRadioGroup

Groups radio menu items. Alias for `Menu.RadioGroup` from Base UI. Also exported as `DropdownMenuRadioGroup`.

### MenuRadioItem

Radio menu item. Styled wrapper for `Menu.RadioItem` from Base UI. Also exported as `DropdownMenuRadioItem`.

### MenuGroupLabel

Label for a menu group. Also exported as `DropdownMenuLabel`.

| Prop    | Type      | Default | Description                                      |
| ------- | --------- | ------- | ------------------------------------------------ |
| `inset` | `boolean` | -       | Adds left padding to align with items that have icons |

### MenuSeparator

Visual separator between menu items. Styled wrapper for `Menu.Separator` from Base UI. Also exported as `DropdownMenuSeparator`.

### MenuShortcut

Displays keyboard shortcut text. Custom component (not a Base UI wrapper). Also exported as `DropdownMenuShortcut`.

### MenuSub

Submenu container. Alias for `Menu.SubmenuRoot` from Base UI. Also exported as `DropdownMenuSub`.

### MenuSubTrigger

Trigger for opening a submenu. Also exported as `DropdownMenuSubTrigger`.

| Prop    | Type      | Default | Description                                      |
| ------- | --------- | ------- | ------------------------------------------------ |
| `inset` | `boolean` | -       | Adds left padding to align with items that have icons |

### MenuSubPopup

Popup for submenu content. Also exported as `DropdownMenuSubContent`.

| Prop          | Type                           | Default   | Description                                      |
| ------------- | ------------------------------ | --------- | ------------------------------------------------ |
| `align`       | `"start" \| "center" \| "end"` | `"start"` | Alignment relative to the trigger                |
| `sideOffset`  | `number`                       | `0`       | Distance from the trigger in pixels              |
| `alignOffset` | `number`                       | `-5`      | Offset along the alignment axis. Defaults to `-5` when `align` is not `"center"` |

## Examples

### Open on Hover

<ComponentPreview name="p-menu-2" />

### With Checkbox

<ComponentPreview name="p-menu-3" />

### With Switch

`MenuCheckboxItem` supports a `variant="switch"` prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant - the component remains a checkbox item with the same functionality.

<ComponentPreview name="p-menu-9" />

### With Radio Group

<ComponentPreview name="p-menu-4" />

### With Link

<ComponentPreview name="p-menu-5" />

### With Group Label

<ComponentPreview name="p-menu-6" />

### Nested Menu

<ComponentPreview name="p-menu-7" />

### Close on Click

<ComponentPreview name="p-menu-8" />

### Open a Dialog

<ComponentPreview name="p-dialog-2" />