Menu
A menu is a list of options for moving around or taking actions.
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 { MenuGroup, Section, ButtonItem, LinkItem } from '@wolf-rayet/react';MenuGroup props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The items, or the sections holding them. |
Section props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | None | Names a section within the menu. Leave it out for a divider with no heading. |
| children * | ReactNode | None | The items, or the sections holding them. |
ButtonItem props
This component takes no props of its own.
LinkItem props
This component takes no props of its own.
Accessibility
What the component does for you, and what it needs from you.
- An item that does something is a button. An item that goes somewhere is a link. This sets how each one works with a keyboard.
- A section heading is linked to its items, so screen readers announce them as a group.
- Items are 40px tall, which makes them easy to select.