Burger

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 '@mantine/hooks';
import { Burger } from '@mantine/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 '@mantine/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 '@mantine/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" />