# Menu (/docs/components/menu)



<ComponentPreview name="menu-demo" />

## Overview [#overview]

Use Menu for a compact list of actions or choices opened from a trigger.

Menus are useful for overflow actions, account menus, row actions, editor commands, and grouped command lists. Do not use a menu for primary navigation when links should stay visible.

## Anatomy [#anatomy]

A menu has a trigger, popup, items, optional groups, labels, separators, checkbox items, radio items, links, and nested submenus.

## Behavior [#behavior]

Keep menu labels short and action-oriented. Use nested menus sparingly because they require more pointer and keyboard precision.

## Accessibility [#accessibility]

Menu items should be reachable with keyboard navigation. Use checkbox and radio menu items only when the checked state matters inside the menu.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add menu
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

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

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

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

      :root {
        --destructive-foreground: oklch(0.505 0.213 27.518);
      }

      .dark {
        --destructive-foreground: oklch(0.704 0.191 22.216);
      }
      ```

      <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 [#usage]

```tsx
import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  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>

    <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>
```

## Examples [#examples]

The examples show hover opening, checkbox items, radio groups, links, group labels, nesting, close behavior, and opening a dialog.

### Open on Hover [#open-on-hover]

<ComponentPreview name="menu-hover" />

### With Checkbox [#with-checkbox]

<ComponentPreview name="menu-checkbox" />

### With Radio Group [#with-radio-group]

<ComponentPreview name="menu-radio-group" />

### With Link [#with-link]

<ComponentPreview name="menu-link" />

### With Group Label [#with-group-label]

<ComponentPreview name="menu-group-labels" />

### Nested Menu [#nested-menu]

<ComponentPreview name="menu-nested" />

### Close on Click [#close-on-click]

<ComponentPreview name="menu-close-on-click" />

### Open a Dialog [#open-a-dialog]

<ComponentPreview name="dialog-from-menu" />