# Dropdown Menu

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<DropdownMenu defaultValue="pro"> <DropdownMenuTrigger variant="outline">{"Open"}</DropdownMenuTrigger> <DropdownMenuContent align="start"> <DropdownMenuLabel>{"Plans"}</DropdownMenuLabel> <DropdownMenuGroup> <DropdownMenuRadioItem value="starter">{"Starter"}</DropdownMenuRadioItem> <DropdownMenuRadioItem value="pro">{"Pro"}</DropdownMenuRadioItem> </DropdownMenuGroup> </DropdownMenuContent> </DropdownMenu>
</div>

```astro
---
---

<DropdownMenu defaultValue="pro">
  <DropdownMenuTrigger variant="outline">Open</DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuLabel>Plans</DropdownMenuLabel>
    <DropdownMenuGroup>
      <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add dropdown-menu
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add dropdown-menu
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add dropdown-menu
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add dropdown-menu
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<DropdownMenu>
  <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>defaultOpen</code> | `boolean` |  |
| <code>defaultValue</code> | `string \| null` |  |
| <code>defaultValues</code> | `string[]` |  |
| <code>closeOnClickOutside</code> | `boolean` |  |
| <code>closeOnEscape</code> | `boolean` |  |
| <code>closeOnSelect</code> | `boolean` |  |
| <code>lockScroll</code> | `boolean` |  |
| <code>highlightItemOnHover</code> | `boolean` |  |
| <code>class</code> | `string` | `""` |

## Examples

### Action Menu

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<DropdownMenu> <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">{"Account"}</Button> <DropdownMenuContent> <DropdownMenuLabel>{"Actions"}</DropdownMenuLabel> <DropdownMenuGroup> <DropdownMenuItem>{"Edit"}</DropdownMenuItem> <DropdownMenuItem>{"Duplicate"}</DropdownMenuItem> </DropdownMenuGroup> <DropdownMenuSeparator /> <DropdownMenuItem>{"Delete"}</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu>
</div>

```astro
---
---

<DropdownMenu>
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Account</Button>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuGroup>
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DropdownMenuItem>Duplicate</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

### Single Select

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<DropdownMenu defaultValue="pro"> <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">{"Plan"}</Button> <DropdownMenuContent> <DropdownMenuRadioItem value="starter">{"Starter"}</DropdownMenuRadioItem> <DropdownMenuRadioItem value="pro">{"Pro"}</DropdownMenuRadioItem> <DropdownMenuRadioItem value="team">{"Team"}</DropdownMenuRadioItem> </DropdownMenuContent> </DropdownMenu>
</div>

```astro
---
---

<DropdownMenu defaultValue="pro">
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Plan</Button>
  <DropdownMenuContent>
    <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>
  </DropdownMenuContent>
</DropdownMenu>
```

### Multi Select

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}> <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">{"Notifications"}</Button> <DropdownMenuContent> <DropdownMenuCheckboxItem value="email">{"Email"}</DropdownMenuCheckboxItem> <DropdownMenuCheckboxItem value="sms">{"SMS"}</DropdownMenuCheckboxItem> <DropdownMenuCheckboxItem value="push">{"Push"}</DropdownMenuCheckboxItem> </DropdownMenuContent> </DropdownMenu>
</div>

```astro
---
---

<DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}>
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Notifications</Button>
  <DropdownMenuContent>
    <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem value="sms">SMS</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem value="push">Push</DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## API Reference

### Events

The dropdown menu emits custom events that you can listen to:

| Event | Detail | Description |
|-------|--------|-------------|
| `dropdown-menu:open-change` | `{ open, previousOpen, source, reason }` | Fired on real open-state changes |
| `dropdown-menu:change` | same detail | Deprecated alias for `dropdown-menu:open-change` |
| `dropdown-menu:highlight-change` | `{ value, previousValue, item, previousItem, source }` | Fired when highlight changes |
| `dropdown-menu:select` | `{ value, item, itemType, source, checked? }` | Cancelable user activation event fired before commit |
| `dropdown-menu:value-change` | `{ value, previousValue, item, previousItem, source }` | Fired when radio selection commits |
| `dropdown-menu:values-change` | `{ values, previousValues, changedValue, checked, item, source }` | Fired when checkbox selection commits |

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<DropdownMenu id="my-dropdown" defaultValue="edit"> <DropdownMenuTrigger>{"Menu"}</DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuRadioItem value="edit">{"Edit"}</DropdownMenuRadioItem> <DropdownMenuRadioItem value="delete">{"Delete"}</DropdownMenuRadioItem> </DropdownMenuContent> </DropdownMenu>
</div>

```astro nocollapse
<DropdownMenu id="my-dropdown" defaultValue="edit">
  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuRadioItem value="edit">Edit</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="delete">Delete</DropdownMenuRadioItem>
  </DropdownMenuContent>
</DropdownMenu>
```

```js nocollapse
  const dropdown = document.getElementById('my-dropdown');

  dropdown.addEventListener('dropdown-menu:open-change', (e) => {
    console.log('Is open:', e.detail.open);
  });

  dropdown.addEventListener('dropdown-menu:value-change', (e) => {
    console.log('Selected:', e.detail.value);
  });
```

### Programmatic Control

You can control the dropdown menu programmatically by dispatching a `dropdown-menu:set` event:

```js nocollapse
const dropdown = document.getElementById('my-dropdown');

// Open the dropdown menu
dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
  detail: { open: true }
}));

// Commit radio selection
dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
  detail: { value: 'delete', source: 'restore' }
}));

// Commit checkbox selection
dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
  detail: { values: ['email', 'push'], source: 'restore' }
}));
```

### Structural Wrappers

`DropdownMenuPortal` and `DropdownMenuRadioGroup` are available for low-level authored markup.
Most consumers should keep using `DropdownMenuContent` directly.

### Data Attributes

The dropdown menu sets these data attributes that you can use for styling or querying state:

| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-state` | dropdown-menu, dropdown-menu-content | Current state (`open` or `closed`) |
| `data-value` | dropdown-menu | Current committed radio value |
| `data-variant` | dropdown-menu-item | Visual variant (`default` or `destructive`) |
| `data-side` | dropdown-menu-content | Computed position (`top`, `right`, `bottom`, or `left`) |
| `data-align` | dropdown-menu-content | Alignment (`start`, `center`, or `end`) |
| `data-highlighted` | menu items | Present when item is focused |
| `data-checked` | radio and checkbox items | Present when item is committed as checked |
| `data-disabled` | menu items | Present when item is disabled |