

<InteractiveDemo
  name="menu"
  controls="[
  {
    type: 'enum',
    name: 'placement',
    options: ['bottom', 'top', 'left', 'right'],
    defaultValue: 'bottom',
  },
]"
/>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/menu
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Use menus to display a list of actions or options that a user can choose from.

```tsx
import { Button } from '@/components/ui/button'
import { Menu, MenuContent, MenuItem } from '@/components/ui/menu'
import { Popover } from '@/components/ui/popover'
```

```tsx
<Menu>
  <Button>Open Menu</Button>
  <Popover>
    <MenuContent>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Duplicate</MenuItem>
      <MenuItem>Delete</MenuItem>
    </MenuContent>
  </Popover>
</Menu>
```

## Examples [#examples]

<Examples>
  <Example name="menu/demos/basic" />

  <Example name="menu/demos/label-and-description" />

  <Example name="menu/demos/prefix-and-suffix" />

  <Example name="menu/demos/shortcut" />

  <Example name="menu/demos/item-variant" />

  <Example name="menu/demos/section" />

  <Example name="menu/demos/separator" />

  <Example name="menu/demos/submenus" />

  <Example name="menu/demos/link-items" />

  <Example name="menu/demos/disabled-items" />

  <Example name="menu/demos/single-selection" />

  <Example name="menu/demos/multiple-selection" />

  <Example name="menu/demos/placement" />

  <Example name="menu/demos/overlay-type" />

  <Example name="menu/demos/with-drawer" />

  <Example name="menu/demos/with-modal" />

  <Example name="menu/demos/long-press" />

  <Example name="menu/demos/controlled" />
</Examples>

## API Reference [#api-reference]

### Menu [#menu]

<Reference name="menu" />

### MenuContent [#menucontent]

<Reference name="menu-content" />

### MenuItem [#menuitem]

<Reference name="menu-item" />

### MenuItemLabel [#menuitemlabel]

<Reference name="menu-item-label" />

### MenuItemDescription [#menuitemdescription]

<Reference name="menu-item-description" />

### MenuSection [#menusection]

<Reference name="menu-section" />

### MenuSectionHeader [#menusectionheader]

<Reference name="menu-section-header" />

### MenuSub [#menusub]

<Reference name="menu-sub" />
