Burger
Open/close navigation button
Import
Source
Docs
Package
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 (<Burgeropened={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';
Size | Width and height |
---|---|
xs | 12px |
sm | 18px |
md | 24px |
lg | 34px |
xl | 42px |
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" />
Built by Vitaly Rtishchev and these awesome people