Burger

import { BurgerDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Burger);

Usage

The Burger component renders an open/close menu button. Set the opened and onClick props to control the component state. If the opened prop is set, a cross will be rendered, otherwise a burger icon.

Change line size

Accessibility

To make the Burger accessible for screen readers, you need to either set aria-label or use the VisuallyHidden component:

import { Burger, VisuallyHidden } from '@mantine/core';

function Demo() {
  return (
    <>
      <Burger aria-label="Toggle navigation" />

      <Burger>
        <VisuallyHidden>Toggle navigation</VisuallyHidden>
      </Burger>
    </>
  );
}