# Burger

> Animated menu toggle — three SVG strokes morph between a hamburger and a close mark. Two-way bindable, so it pairs naturally with a `<wr-drawer>`.

Source: https://ngwr.dev/reference/components/burger  
Kind: Component, Standalone

## Basic usage

Click to morph between the hamburger and close marks. The `open` state is two-way bindable.

```angular-html
<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.

```angular-html
<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.

```angular-html
<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` |