## Burger  
Open/close navigation button. Use the dmc.Burger component to toggle navigation menus.  
Category: Navigation  

### Simple Example

Burger component renders open/close menu button. If it's burger state is clicked, the `opened` property is set to `True`,
and if it's cross state is clicked, the `opened` property is set to `False`.

```python
import dash_mantine_components as dmc
from dash import Input, Output, callback, html

component = html.Div(
    [dmc.Burger(id="burger-button", opened=False), dmc.Text(id="burger-state", mt="md")]
)


@callback(Output("burger-state", "children"), Input("burger-button", "opened"))
def is_open(opened):
    return str(opened)
```
### Size and Line Size

Use `size` prop to control the `Burger` width and height, numbers are converted to rem, 'md' by default.
Use the `lineSize` prop to control height of lines, by default calculated based on `size` prop.  

```python
dmc.Burger(id="burger-button", opened=False, lineSize=2, size="md")
```

### Colors

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Burger(),
        dmc.Burger(color="red"),
        dmc.Burger(color="green"),
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Burger Selectors

| Selector | Static selector         | Description                           |
|----------|--------------------------|---------------------------------------|
| root     | .mantine-Burger-root     | Root element (button)                 |
| burger   | .mantine-Burger-burger   | Inner element that contains burger lines |

#### Burger CSS Variables

| Selector | Variable                            | Description                                |
|----------|-------------------------------------|--------------------------------------------|
| root     | --burger-line-size                  | Controls height of lines                   |
|          | --burger-color                      | Controls background-color of lines         |
|          | --burger-size                       | Controls width and height of the button    |
|          | --burger-transition-duration        | Controls transition-duration of lines      |
|          | --burger-transition-timing-function | Controls transition-timing-function of lines |

#### Burger Data Attributes

| Selector | Attribute    | Condition          |
|----------|--------------|--------------------|
| burger   | data-opened  | `opened` prop is set |


### Keyword Arguments
#### Burger

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` of any valid CSS value, by default
    `theme.white` in dark color scheme and `theme.black` in light.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineSize (number; optional):
    Height of the burger lines.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- opened (boolean; default False):
    State of the burger, when `True` burger is transformed into X,
    `False` by default.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- size (number; optional):
    Controls burger `width` and `height`, numbers are converted to
    rem, `'md'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- transitionDuration (number; optional):
    `transition-duration` property value in ms, `300` by default.

- transitionTimingFunction (string; optional):
    `transition-timing-function` property value, `'ease'` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.