Burger

Animated menu toggle: three lines morph into an X (`spin`, `squeeze`) or an arrow. A disclosure button: it exposes aria-expanded (not aria-pressed, which together would announce two states) and a label; pass `aria-controls`.

Import

import { Burger } from '@marbleui/ui'

Props

<Burger>

Prop	Type	Default	Description
size	`'sm' \| 'md'`	`'md'`
variant	`'squeeze' \| 'spin' \| 'arrow'`	`'squeeze'`

Also accepts React Aria props (104).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Animated menu button whose three lines morph into an X or an arrow. It only toggles state; you render the menu. For a site header with a built-in small-screen menu use Navbar.

<Burger isSelected={open} onChange={setOpen} aria-controls="site-menu" />
{open && <nav id="site-menu">…</nav>}

It takes React Aria ToggleButton props: control it with isSelected/onChange (or defaultSelected). The accessible name defaults to “Menu”; change it with aria-label.
It announces as a disclosure button: aria-expanded follows isSelected (there’s no aria-pressed). Pass aria-controls with the menu’s id.
variant: squeeze (default, lines fold into an X), spin (the X rotates in), arrow (a left arrow). size is sm (32 px) or md (40 px).
The animation is turned off under reduced motion.

Example source · show

import { useState } from 'react'
import { Burger } from './burger'

function Nav() {
  const [open, setOpen] = useState(false)
  return (
    <div className="w-80 overflow-hidden rounded-xl border border-border bg-surface">
      <div className="flex items-center justify-between px-3 py-2"><span className="font-semibold text-fg">Acme</span><Burger isSelected={open} onChange={setOpen} aria-controls="burger-menu" /></div>
      {open && <nav id="burger-menu" className="flex flex-col border-t border-border p-2 text-sm">{['Product', 'Pricing', 'Docs'].map((l) => <a key={l} href="#" className="rounded-md px-2 py-1.5 text-fg hover:bg-surface-muted">{l}</a>)}</nav>}
    </div>
  )
}
export const styles = { Variants: () => <div className="flex gap-4">{(['squeeze', 'spin', 'arrow'] as const).map((v) => <Burger key={v} variant={v} aria-label={`Menu (${v})`} />)}</div>, 'With menu': Nav }

Source: packages/ui/src/burger/burger.tsx

Catalog

Category: navigation
Priority: Extra
Primitive: composed
React Aria: ToggleButton
Base UI: Toggle