Basic usage
Click to morph between the hamburger and close marks. The open state is two-way bindable.
<wr-burger [(open)]="menuOpen" />With a drawer
The canonical pairing — bind the same signal to <wr-burger> and <wr-drawer>. The button morphs to a close mark while the menu is open, and tapping it again closes the menu.
<wr-burger [(open)]="menuOpen" />
<wr-drawer [(open)]="menuOpen" position="right" width="16rem">
<!-- nav links… -->
</wr-drawer>Styling
Size, colors, stroke width, and morph duration are all CSS custom properties — override them inline or in a stylesheet.
<wr-burger
[(open)]="menuOpen"
style="--wr-burger-size: 3rem; --wr-burger-color-opened: var(--wr-color-danger);"
/>Disabled
A disabled toggle ignores clicks and dims.
API
| Name | Description | Type | Default |
|---|---|---|---|
open | Two-way bindable open state. Drives the hamburger ↔ close morph. | boolean | false |
label | Accessible name for the toggle button. Falls back to burger.label, then 'Toggle menu'. | string | null | null |
disabled | Disable the toggle. | boolean | false |
CSS variables
| Name | Description | Type | Default |
|---|---|---|---|
--wr-burger-size | Button square size. | length | 2.5rem |
--wr-burger-color | Resting stroke color. | color | var(--wr-color-dark) |
--wr-burger-color-opened | Stroke color when open. | color | var(--wr-color-primary) |
--wr-burger-stroke-width | Line thickness. | length | 6px |
--wr-burger-duration | Morph duration. | time | 0.5s |
CSS variables
Custom properties ngwr/burger publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-burger-color | var(--wr-color-on-surface) | .wr-burger +1 variant override |
--wr-burger-color-opened | var(--wr-color-primary) | .wr-burger |
--wr-burger-duration | 0.5s | .wr-burger |
--wr-burger-ease | var(--wr-ease-in-out) | .wr-burger |
--wr-burger-offset-1 | 0 | .wr-burger +1 variant override |
--wr-burger-offset-2 | 0 | .wr-burger +1 variant override |
--wr-burger-offset-3 | 0 | .wr-burger +1 variant override |
--wr-burger-size | 2.5rem | .wr-burger |
--wr-burger-stroke-1 | 60 207 | .wr-burger +1 variant override |
--wr-burger-stroke-2 | 60 60 | .wr-burger +1 variant override |
--wr-burger-stroke-3 | 60 207 | .wr-burger +1 variant override |
--wr-burger-stroke-width | 6px | .wr-burger |