Burger
A three-line hamburger button that animates to an × (close) icon when opened is true. Commonly used to toggle mobile navigation menus. Renders as a <button> with appropriate aria-expanded and aria-label attributes.
Default (closed)
<Burger />Opened state
<Burger opened />Sizes
<Burger size="xs" />
<Burger size="sm" />
<Burger size="md" />
<Burger size="lg" />
<Burger size="xl" />Custom color
<Burger color="var(--dv-color-blue-filled)" />
<Burger color="var(--dv-color-red-filled)" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
opened | boolean | false | Animates lines to × icon and sets aria-expanded |
size | 'xs'|'sm'|'md'|'lg'|'xl'|number | — | Width/height of the button hit target |
color | string | — | CSS color applied to the three lines |
lineSize | number | — | Thickness of each line in pixels |
transitionDuration | number | — | Duration of the open/close animation in ms |
aria-label | string | auto | Accessible label; defaults to "Open/Close navigation" |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |