Skip to main content

Overlays and menus

DropdownMenu

Render an action menu for compact secondary actions. A neat little list of things you can do, hidden behind a button.

Curated demo

Reference

Render an action menu for compact secondary actions. A neat little list of things you can do, hidden behind a button.

  • Use DropdownMenu for secondary actions, not primary tasks. It's the junk drawer of UI actions.
  • Keep primary actions visible elsewhere on the page. Don't hide the 'Save' button in a dropdown.
  • Arrow keys, Home, and End navigation are built in once the menu is open.

Props

Name Type Default Description
id string — Unique ID for the menu.
open boolean false Whether the menu is open.
items * MenuItem[] — List of menu items.
class string — Additional CSS classes.

Example snippet

<DropdownMenu open items={menuItems} />