Skip to content

Dropdown Menu

Action and selection menus with runtime-owned open, highlight, and committed selection state.

1
---
2
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioItem, DropdownMenuTrigger } from '@bejamas/registry/ui/dropdown-menu';
3
---
4

5
<DropdownMenu defaultValue="pro">
6
  <DropdownMenuTrigger variant="outline">Open</DropdownMenuTrigger>
7
  <DropdownMenuContent align="start">
8
    <DropdownMenuLabel>Plans</DropdownMenuLabel>
9
    <DropdownMenuGroup>
10
      <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
11
      <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
12
    </DropdownMenuGroup>
13
  </DropdownMenuContent>
14
</DropdownMenu>

Installation

bunx bejamas add dropdown-menu

npx bejamas add dropdown-menu

pnpm dlx bejamas add dropdown-menu

yarn dlx bejamas add dropdown-menu

Usage

1
---
2
import {
3
  DropdownMenu,
4
  DropdownMenuTrigger,
5
  DropdownMenuContent,
6
  DropdownMenuItem,
7
  DropdownMenuRadioItem,
8
} from '@bejamas/ui/components/dropdown-menu';
9
---
10

11
<DropdownMenu>
12
  <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
13
  <DropdownMenuContent>
14
    <DropdownMenuItem>Item 1</DropdownMenuItem>
15
  </DropdownMenuContent>
16
</DropdownMenu>

Props

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

Examples

1
---
2
import { Button } from '@bejamas/registry/ui/button';
3
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@bejamas/registry/ui/dropdown-menu';
4
---
5

6
<DropdownMenu>
7
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Account</Button>
8
  <DropdownMenuContent>
9
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
10
    <DropdownMenuGroup>
11
      <DropdownMenuItem>Edit</DropdownMenuItem>
12
      <DropdownMenuItem>Duplicate</DropdownMenuItem>
13
    </DropdownMenuGroup>
14
    <DropdownMenuSeparator />
15
    <DropdownMenuItem>Delete</DropdownMenuItem>
16
  </DropdownMenuContent>
17
</DropdownMenu>

Single Select

1
---
2
import { Button } from '@bejamas/registry/ui/button';
3
import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioItem } from '@bejamas/registry/ui/dropdown-menu';
4
---
5

6
<DropdownMenu defaultValue="pro">
7
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Plan</Button>
8
  <DropdownMenuContent>
9
    <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
10
    <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
11
    <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>
12
  </DropdownMenuContent>
13
</DropdownMenu>

Multi Select

1
---
2
import { Button } from '@bejamas/registry/ui/button';
3
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent } from '@bejamas/registry/ui/dropdown-menu';
4
---
5

6
<DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}>
7
  <Button variant="outline" data-slot="dropdown-menu-trigger" class="cn-dropdown-menu-trigger">Notifications</Button>
8
  <DropdownMenuContent>
9
    <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
10
    <DropdownMenuCheckboxItem value="sms">SMS</DropdownMenuCheckboxItem>
11
    <DropdownMenuCheckboxItem value="push">Push</DropdownMenuCheckboxItem>
12
  </DropdownMenuContent>
13
</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

1
<DropdownMenu id="my-dropdown" defaultValue="edit">
2
  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
3
  <DropdownMenuContent>
4
    <DropdownMenuRadioItem value="edit">Edit</DropdownMenuRadioItem>
5
    <DropdownMenuRadioItem value="delete">Delete</DropdownMenuRadioItem>
6
  </DropdownMenuContent>
7
</DropdownMenu>

  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:

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