Dropdown Menu

A menu that appears on trigger click, displaying a list of actions or options.

1
---
2
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@bejamas/ui/components/dropdown-menu';
3
---
4

5
<DropdownMenu>
6
  <DropdownMenuTrigger variant="outline">Open</DropdownMenuTrigger>
7
  <DropdownMenuContent align="start">
8
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
9
    <DropdownMenuGroup>
10
      <DropdownMenuItem>
11
        Profile
12
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
13
      </DropdownMenuItem>
14
      <DropdownMenuItem>Settings</DropdownMenuItem>
15
    </DropdownMenuGroup>
16
    <DropdownMenuSeparator />
17
    <DropdownMenuItem disabled>API</DropdownMenuItem>
18
    <DropdownMenuItem>Log out</DropdownMenuItem>
19
  </DropdownMenuContent>
20
</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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@bejamas/ui/components/dropdown-menu';
3
---
4

5
<DropdownMenu>
6
  <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
7
  <DropdownMenuContent>
8
    <DropdownMenuItem>Item 1</DropdownMenuItem>
9
  </DropdownMenuContent>
10
</DropdownMenu>

Props

Prop	Type	Default
`class`	`string`	`""`

Examples

With Labels and Groups

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

6
<DropdownMenu>
7
  <Button variant="outline" data-slot="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>

With Keyboard Shortcuts

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

6
<DropdownMenu>
7
  <Button variant="outline" data-slot="dropdown-menu-trigger">Edit</Button>
8
  <DropdownMenuContent>
9
    <DropdownMenuItem>
10
      Undo
11
      <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
12
    </DropdownMenuItem>
13
    <DropdownMenuItem>
14
      Redo
15
      <DropdownMenuShortcut>⇧⌘Z</DropdownMenuShortcut>
16
    </DropdownMenuItem>
17
    <DropdownMenuSeparator />
18
    <DropdownMenuItem>
19
      Cut
20
      <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
21
    </DropdownMenuItem>
22
    <DropdownMenuItem>
23
      Copy
24
      <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
25
    </DropdownMenuItem>
26
    <DropdownMenuItem>
27
      Paste
28
      <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
29
    </DropdownMenuItem>
30
  </DropdownMenuContent>
31
</DropdownMenu>

With Disabled Items

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

6
<DropdownMenu>
7
  <Button variant="outline" data-slot="dropdown-menu-trigger">Options</Button>
8
  <DropdownMenuContent>
9
    <DropdownMenuItem>Available action</DropdownMenuItem>
10
    <DropdownMenuItem disabled>Disabled action</DropdownMenuItem>
11
    <DropdownMenuItem>Another action</DropdownMenuItem>
12
  </DropdownMenuContent>
13
</DropdownMenu>

API Reference

Events

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

Event	Detail	Description
`dropdown-menu:change`	`{ open: boolean }`	Fired when the menu opens or closes
`dropdown-menu:select`	`{ value: string }`	Fired when an item is selected

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

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

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

  dropdown.addEventListener('dropdown-menu:select', (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 }
}));

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

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-side`	dropdown-menu-content	Computed position (`top`, `right`, `bottom`, or `left`)
`data-align`	dropdown-menu-content	Alignment (`start`, `center`, or `end`)
`data-highlighted`	dropdown-menu-item	Present when item is focused
`data-disabled`	dropdown-menu-item	Present when item is disabled