Dropdown menu
A React component in Beamline's Overlays category, in the free sample.
A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
Use it for
- Row actions, More menus, account menus, Move to…
Not for
- Choosing a form value (select).
- App-wide search and commands (command-menu).
- Right-click menus (context-menu).
Anatomy
- trigger (built-in Button, or your own)
- surface
- highlight plate
- item (icon, label, shortcut)
- check item
- heading
- separator
- submenu
Variants
- trigger: text, icon only, custom
- tone: default, danger
States
- closed
- open
- item highlighted
- item disabled
- check item on/off
- submenu open
Keyboard
- Enter / Space / ↓ opens
- ↑ ↓ move, wrapping
- → opens a submenu, ← closes it
- type a letter to jump
- Escape closes and returns focus
Motion
The surface grows from the trigger; one highlight plate glides between rows for the pointer and the arrow keys alike (--pui-duration-fast) and appears in place the first time. Reduced motion places it at once.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
items | MenuItem[] | — | |
icon | ReactNode | — | |
trigger | ReactElement | — | |
variant / size | ButtonVariant / ButtonSize | "ghost" / "sm" | |
align / side | string | "end" / "bottom" | |
MenuItem | { label, icon?, shortcut?, onSelect?, disabled?, tone?: "danger", separatorBefore?, heading?, checked?, items? } | — | |
open / defaultOpen / onOpenChange | boolean | — | |
classNames | MenuClassNames | — | |
style / ref | CSSProperties / native Ref | — | Root styles; ref targets native popup div. |
Dependencies
@radix-ui/react-dropdown-menu, lucide-react
Import
import { DropdownMenu } from "@/components/dropdown-menu/dropdown-menu";Get it
Dropdown menu is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Dropdown menu is in the free sample, which costs nothing. Get Beamline · Connect your agent
More in Overlays
- Alert Dialog: A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- Bottom sheet: A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- Command menu: Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- Context menu: Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- Dialog: A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- Hover card: A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- Popover: A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- Sheet: A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- Toast: Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- Tooltip: Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.