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 { useState } from 'react';
import { Burger } from '@mantine/core';

function Demo() {
  const [opened, setOpened] = useState(false);
  const title = opened ? 'Close navigation' : 'Open navigation';

  return (
    <Burger
      opened={opened}
      onClick={() => setOpened((o) => !o)}
      title={title}
    />
  );
}

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 in px:

<Burger size="sm" /> // -> predefined small size
<Burger size={50} /> // -> { width: 50, height: 50 }

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 by default element does not 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" />