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 { 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>();
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" />