'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Burger
The three-line menu button that turns into a close icon.
Ant Design: -
import { Burger } from '@alea/ui';
Examples
Burger
Turns into a close icon and reports aria-expanded.
Props
Burger props
The three-line menu button that morphs into a close icon (Mantine Burger).
| Prop | Type | Default | Description |
|---|---|---|---|
isOpenrequired | boolean | - | Whether the menu it controls is open. |
onChangerequired | (open: boolean) => void | - | Called with the new open state. |
aria-controls | string | - | The id of the menu it opens. |
aria-label | string | - | Name. Default "Menu". |
className | string | - | Extra class names for the root element. |
size | "sm" | "md" | 'md' | sm (32 px) or md (40 px, default). |
Accessibility
- A button with aria-expanded and aria-controls pointing at the menu.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens or closes the menu |
Do and don't
Do
- Point aria-controls at the menu it opens.
- Show the full navigation on wide screens instead.
Don't
- Don't hide important navigation behind it on desktop.
- Don't use it for anything but showing navigation.