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 React, { 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:

<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 }

You can get default sizes by importing BURGER_SIZES:

import { BURGER_SIZES } from '@mantine/core';

Get element ref

You can get burger button ref by setting elementRef prop:

import { useRef } from 'react';
import { Burger } from '@mantine/core';

function Demo() {
  const ref = useRef();
  return <Burger elementRef={ref} />;
}

Accessibility

Burger renders a regular button element. Include title or aria-label props for screen reader support as by design 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" />