DropdownMenu

A list of actions behind a button. MenuItem rows take an icon, a description, a shortcut and a danger tone; pick a menu for commands, not for choosing a form value.

DropdownMenu
MenuItem

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, DropdownMenu

Dark theme, DropdownMenu

High contrast theme, DropdownMenu

UsageLink to the section Usage

tsx

import { DropdownMenu, MenuItem } from '@skribly/ui/overlays'

tsx

<DropdownMenu trigger={<IconButton label="Help"><CircleHelp /></IconButton>} onAction={run}>
  <MenuItem id="guide" icon={<LifeBuoy />}>Start the guide</MenuItem>
  <MenuItem id="delete" tone="danger">Delete</MenuItem>
</DropdownMenu>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Enter, Space or Arrow Down opens it on the first row, Arrow Up on the last.
Arrows move, typing jumps to a row, Enter runs it and Escape closes.
The menu is named by its trigger, each row by all of its text, label first, so a description is read with it, and icons are hidden.
Rows are at least 32px tall.

This demo runs through axe in all three themes on every test run. See what the tests check.