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 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';
SizeWidth and height
xs12px
sm18px
md24px
lg34px
xl42px

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" />
Build fully functional accessible web applications with ease
Feedback
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