Dropdown menu
A dropdown menu displays a list of actions or options to a user.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { DropdownMenu } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger * | string | ((props: { 'aria-expanded': boolean; onClick: () => void }) => ReactNode) | — | A string for a plain button, or a function returning your own. A function must spread the props it is given, because they carry the expanded state. |
| children * | ReactNode | — | The menu, usually a menu group holding items or sections. |
| placement | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom-start' | Which corner it opens from. It flips when there is no room. |
| label | string | — | Names the menu for assistive technology when the trigger alone does not. |
Accessibility
What the component does for you, and what it needs from you.
- The trigger reports that it opens a menu and whether it is open, which is why a custom trigger must receive the props it is handed.
- The arrow keys move through items and Escape closes the menu, returning focus to the trigger.
- Section headings are tied to the items under them, so the group is announced rather than read as a run of items.