Skip to contentWolf-Rayet

Menu

A list of options to help users navigate or perform actions.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@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.

PropTypeDefaultDescription
children *ReactNode—The items, or the sections holding them.

Section props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
titlestring—Names a section within the menu. Leave it out for a divider with no heading.
children *ReactNode—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 and an item that goes somewhere is a link, which decides how each one behaves on the keyboard.
  • A section heading is tied to the items it covers, so the group is announced rather than read as a loose run.
  • Items are 40px tall, which is a comfortable target and is a comfortable target.