Components
Dropdown menu
A menu of actions, checkbox items and radio items, opened from a trigger.
Client componentUses state or handlers, so it starts with "use client".
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut } from "@glob-ui/dropdown-menu"Preview
Last action: none · Theme: system
API
Props are generated from the TypeScript types in the package source.
DropdownMenu
DropdownMenuTrigger
DropdownMenuContent
DropdownMenuItem
DropdownMenuCheckboxItem
DropdownMenuRadioGroup
DropdownMenuRadioItem
Accessibility
| Key or action | Behaviour |
|---|---|
| Enter, Space, ArrowDown on the trigger | Opens the menu and focuses the first item. ArrowUp focuses the last item. |
| Arrow keys, Home, End | Move between items, looping at the ends. Disabled items are skipped. |
| Letters | Typeahead. |
| Enter, Space on an item | Runs onSelect, then closes. Checkbox and radio items stay open. Call preventDefault() in onSelect to keep the menu open. |
| Escape | Closes and returns focus to the trigger. |
| Tab | Closes the menu and moves focus on. |
| Pointer hover | Moves focus to the hovered item. |
ARIA. The trigger has aria-haspopup="menu" and aria-expanded. The content is role="menu", named by the trigger. Items are menuitem, menuitemcheckbox (with aria-checked) or menuitemradio.