Open/close navigation button


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 (
onClick={() => setOpened((o) => !o)}


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" />


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

You can get burger button ref by setting ref prop:

import { useRef } from 'react';
import { Burger } from '@mantine/core';
function Demo() {
const ref = useRef();
return <Burger ref={ref} />;


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" />
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback