Dropdown menu
A dropdown menu shows a list of actions or options.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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) | None | A string for a plain button, or a function that returns your own. The function must spread the props it receives, because they include the expanded state. |
| children * | ReactNode | None | 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 | None | 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 the menu is open. This is why a custom trigger must receive the props it is given.
- The arrow keys move through items and Escape closes the menu, returning focus to the trigger.
- Section headings are linked to the items under them, so screen readers announce the group name with its items.