Overlays
Dropdown menu
A menu of actions that opens from a trigger, with separators and a destructive item style. Built on Radix Dropdown Menu.
- Source
- src/components/ui/dropdown-menu.tsx
- Figma
- Menu · MenuItem · state (default, hover, danger).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator,} from "@/components/ui/dropdown-menu";When to use
- Row actions in a table or list, behind an icon button.
- Secondary actions that do not deserve their own button, such as Duplicate or Archive.
- Account menus in a header or sidebar.
- For choosing a value in a form, use Select or Combobox.
- For one or two actions, show them as buttons instead of hiding them in a menu.
Examples
Row actions with icons
An icon-only trigger aligned to the end. Add gap-2 to items that carry an icon.
Confirm before deleting
A destructive item opens a controlled Dialog from onSelect. Try deleting, then restore.
API reference
DropdownMenu
Radix DropdownMenu.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called when the menu opens or closes. |
| modal | boolean | true | When true, outside content is not interactive while the menu is open. |
DropdownMenuTrigger
Radix DropdownMenu.Trigger. Opens on click, Enter, Space or Arrow Down.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge trigger behavior into the child element, e.g. a Button. |
DropdownMenuContent
Card-styled menu surface in a portal. Extends Radix DropdownMenu.Content props.
| Prop | Type | Default | Description |
|---|---|---|---|
| sideOffset | number | 6 | Distance from the trigger in pixels. |
| side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side of the trigger. Flips when there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment against the trigger. Use end for row actions on the right. |
DropdownMenuItem
Radix DropdownMenu.Item. Extends its props. Lay out icons with className="gap-2".
| Prop | Type | Default | Description |
|---|---|---|---|
| destructive | boolean | false | Destructive text color and a red highlight, for Delete and similar actions. |
| onSelect | (event: Event) => void | - | Called when the item is chosen by click or keyboard. The menu then closes; call event.preventDefault() to keep it open. |
| disabled | boolean | false | Skipped by keyboard navigation and not selectable. Not styled by default: add data-disabled:opacity-50. |
| asChild | boolean | false | Render the child element, e.g. a Link, with item behavior. |
DropdownMenuSeparator
A 1px divider between groups of items. Extends Radix DropdownMenu.Separator props.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Extra classes, merged with the defaults. |
Accessibility
- Built on Radix Dropdown Menu: the trigger gets aria-haspopup and aria-expanded, and the content has role="menu" with menuitem children.
- Arrow keys move between items, typing a letter jumps to the matching item and Escape closes the menu and returns focus to the trigger.
- Disabled items are skipped by keyboard navigation.
- Icon-only triggers need an aria-label, such as "Row actions".
- Destructive items are marked by color only. Keep the label explicit ("Delete project") and confirm with a Dialog.