Dropdown menu
A focused list of actions anchored to a trigger.
pnpm dlx shadcn@latest add @uiarc/dropdown-menuLive · keyboard ready
- A list of commands behind a labelled button, such as Rename, Duplicate, and Delete.
- Row or card actions where a visible trigger is clearer than right-click.
- Short grouped menus with separators and one destructive item at the end.
- Use split-button when one command is the default.
- Use context-menu for right-click actions on content.
- Use user-menu for the account menu, and command-palette for searching many commands.
Installation
Add Dropdown menu with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/dropdown-menuAdds the component and its local dependencies, and installs @radix-ui/react-dropdown-menu, motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { DropdownMenu } from "@/registry/components/dropdown-menu/dropdown-menu";import { Pencil, Copy, Trash2 } from "lucide-react"; export function ProjectActions() { return ( <DropdownMenu label="Actions" items={[ { label: "Rename", icon: <Pencil size={15} />, onSelect: rename }, { label: "Duplicate", icon: <Copy size={15} />, onSelect: duplicate }, { label: "Delete", icon: <Trash2 size={15} />, onSelect: remove, destructive: true, separatorBefore: true }, ]} /> );}DropdownMenu
A labelled trigger that opens a Radix menu with a single highlight gliding between items.
PropTypeDefaultDescription
labelRequiredstring–Trigger text. A new label rises in while the trigger width springs.itemsRequiredDropdownItem[]–Items: { label, onSelect?, disabled?, icon?, destructive?, separatorBefore? }. Labels double as keys, so keep them unique.iconReactNode–Leading icon in the trigger.- EnterorSpaceorArrowDown
- Opens the menu from the trigger.
- ArrowDownorArrowUp
- Moves between items, looping at the ends.
- HomeorEnd
- Jumps to the first or last item.
- Escape
- Closes the menu and returns focus to the trigger.
- Built on Radix DropdownMenu: the trigger gets aria-haspopup and aria-expanded, items get menuitem roles and typeahead.
- Icons and the highlight are aria-hidden; destructive items are marked by color and should say what they destroy.
- Disabled items are skipped by the keyboard.
- The highlight glides between items on a snappy spring for the pointer and jumps instantly for the keyboard.
- The menu scales in from the trigger and items fade in with a short stagger.
- Reduced motion removes the menu transform and highlight glide, keeping a quick opacity fade.
- The trigger label ellipsizes within max-width 100%, so it shrinks inside narrow toolbars instead of overflowing.
- The menu uses Radix collision handling with 12px padding and a 12rem minimum width, flipping away from viewport edges.
- Hover styles apply only on fine pointers; touch taps select without a stuck highlight.
- Menu content renders in a portal only while open; items are not virtualized, so keep lists short.
- The menu has a translucent backdrop blur, which drops to a solid surface under prefers-reduced-transparency.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Default choice for a list of commands behind a button. Use split-button when one command is the default, and context-menu for right-click on content.
- Group items with separatorBefore; put destructive items last.
- Items are data, not children, so build the array from your actions.
The full library index for assistants is at /llms.txt.