Burger
Open/close navigation button
Import
Source
Docs
Package
Usage
Burger component renders open/close menu button.
Set opened
and onClick
props to control Burger state.
If opened
prop is set cross will be rendered, otherwise – burger:
Color
Burger default colors are theme.black
for light color scheme and theme.white
for dark color scheme.
You can change it to any color value by setting color
prop:
Size
Burger has predefined sizes: xs, sm, md, lg, xl. Alternatively, you can use a number to set width and height:
Get button ref
Accessibility
Burger renders a regular button element. Include title
or aria-label
props for screen reader support,
as the default element does not have an associated label.
Burger component props
Name | Type | Description |
---|---|---|
color | string | Burger color value, not connected to theme.colors, defaults to theme.black with light color scheme and theme.white with dark |
opened * | boolean | Burger state: true for cross, false for burger |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Predefined burger size or number to set width and height |
transitionDuration | number | Transition duration in ms |
Burger component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Burger-root | Root button element |
burger | .asuikit-Burger-burger | Burger icon |