v6.0.35

Burger

Open/close navigation button
Import

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:

import { useDisclosure } from '@asuikit/hooks';
import { Burger } from '@asuikit/core';
function Demo() {
const [opened, { toggle }] = useDisclosure(false);
const label = opened ? 'Close navigation' : 'Open navigation';
return <Burger opened={opened} onClick={toggle} aria-label={label} />;
}

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:

import { Burger } from '@asuikit/core';
function Demo() {
return (
<>
<Burger />
<Burger color="#fe6734" />
<Burger color="#45f50d" />
</>
);
}

Size

Burger has predefined sizes: xs, sm, md, lg, xl. Alternatively, you can use a number to set width and height:

<Burger size="sm" /> // -> predefined small size
<Burger size={48} /> // -> { width: '3rem', height: '3rem' }

Get button ref

import { useRef } from 'react';
import { Burger } from '@asuikit/core';
function Demo() {
const ref = useRef<HTMLButtonElement>(null);
return <Burger ref={ref} opened={false} />;
}

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.

// Set title to show message on hover
<Burger title="Open navigation" />
// Set aria-label to announce control with screen reader
<Burger aria-label="Open navigation" />

Burger component props

NameTypeDescription
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

NameStatic selectorDescription
root.asuikit-Burger-rootRoot button element
burger.asuikit-Burger-burgerBurger icon