Shadcn Dropdown Menu: Accessible React Menu Examples
The shadcn dropdown menu displays a list of actions triggered by a button, with full keyboard navigation, submenus, checkbox and radio items, and collision-aware positioning. It is the react dropdown component you reach for whenever a row, avatar, or toolbar needs a compact set of actions, styled with Tailwind CSS so every menu matches your theme.
This page collects twelve dropdown menu examples you can copy and paste, ranging from simple action lists to menus with icons, shortcuts, groups, separators, nested submenus, and checkable items. Each variant is typed TypeScript and drops into Next.js or any React codebase without modification.
What you get
- Action menus: Straightforward lists of commands with icons and keyboard shortcut hints.
- Grouped items: Labels and separators that organize longer menus into scannable sections.
- Submenus: Nested menus that open on hover or arrow key, for actions that branch.
- Checkbox and radio items: Stateful menu items for toggling settings and picking exactly one option.
- Account menus: Profile style dropdowns that combine user info, navigation links, and a sign out action.
- Destructive actions: Delete items styled with the destructive variant and separated from safe actions.
Implementation tips
- Use asChild on the trigger: Pass your Button through DropdownMenuTrigger with asChild to avoid nested button elements and keep variant styling.
- Confirm destructive items: Route delete actions through an alert dialog instead of executing on click, since menus close immediately.
- Keep menus short: Seven or fewer visible items is a good ceiling. Move overflow into a submenu or a dedicated page.
- Prefer onSelect: Use the item onSelect callback rather than onClick so keyboard activation behaves identically to pointer clicks.
- Watch modality in tables: When a menu opens from a table row, test that focus returns to the trigger so keyboard users do not lose their place.
Where it fits in a dashboard
Dropdown menus are the pressure valve of dense interfaces. Every data table row ends in one, every card header hides secondary actions in one, and the account menu in the top right corner of nearly every admin app is one. They let a screen offer many operations while showing almost none of them by default.
They also carry settings. Checkbox items toggle column visibility on tables, radio items switch sort orders or themes, and submenus handle move-to and assign-to flows without leaving the page.
Related components and patterns
The same menu behavior appears in sibling components. A Context Menu opens on right click instead of a trigger button, a Menubar arranges several menus in an application-style bar, and a Command palette scales better when the action list grows long enough to need search.
Triggers are usually a Button or an Avatar, and for positioned content that is informational rather than actionable, a Popover is the better primitive.
Library support
These examples follow the shadcn/ui Dropdown Menu docs and build on the Radix UI Dropdown Menu primitive, which supplies typeahead focus, arrow key navigation, submenu timing, and collision handling.
Teams standardizing on Base UI can achieve the same result with the Base UI Menu component, which covers the equivalent feature set, and the Tailwind CSS classes from these variants carry over with small structural changes.