/// Utilities
Burger
An animated hamburger↔close toggle — the mobile-nav trigger, reflecting its open state via aria-expanded.
import { Burger } from "@protocore/pds";Basics
A controlled toggle: hold the opened state yourself and update it from onToggle. The three lines morph into an X when opened; reduced-motion snaps between the two.
Sizes
Three square sizes — sm 32 · md 36 · lg 40 — matching the control-height scale so it lines up with the buttons beside it in a top bar.
When to use it
Burger is the mobile-navigation trigger: a compact button that toggles a menu and animates to reflect whether that menu is open. It is purely a *trigger* — it owns no menu of its own. Wire opened/onToggle to the same state that drives your Sheet or Sidebar, so the icon and the drawer never disagree.
Keep it to genuinely responsive navigation. On wide layouts where the nav is always visible, don't show a Burger — there is nothing to reveal.
Usage
Do
- Bind `opened` to the same state as the drawer it controls.
- Update the `aria-label` to describe the *next* action ("Open" vs "Close navigation").
- Match its `size` to the other controls in the bar.
- Show it only at breakpoints where the navigation is collapsed.
Don't
- Don't leave `aria-label` at a generic value that ignores the current state.
- Don't animate it out of sync with the menu it toggles.
- Don't use it as a generic icon button — it means "toggle navigation".
- Don't show it when the full navigation is already on screen.
Accessibility
| Keys | Action |
|---|---|
| Tab | Moves focus to the toggle. |
| Enter / Space | Toggles it, firing onToggle with the next state. |
- Renders a real `<button>` exposing `aria-expanded` bound to `opened`, so assistive tech announces the collapsed/expanded state.
- Requires an accessible name via `aria-label` (default "Open navigation") — the animated lines are `aria-hidden`.
- The morph is pure CSS transform; `prefers-reduced-motion` snaps between hamburger and X with no tween.
- The lines are `<span>` elements, not a text glyph, so nothing renders as an emoji.
Burger props
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | Open navigation | Accessible name for the control — required, since the icon carries no text. |
className | string | — | |
onToggle | ((opened: boolean) => void) | — | Called with the next opened state when the button is activated. |
opened | boolean | false | Whether the burger is in its open (X) state. Controlled. |
size | enum | md | Square control size: `sm` 32 · `md` 36 · `lg` 40. |
style | CSSProperties | — |