Skip to main content

BurgerMenu

BurgerMenu in Storybook

Examples​

Check out the Usage section for details about how to design a burger menu properly, and the different configuration options we provide.

Basic example​

A basic burger menu is a wrapper placed around a number of child elements. This will render a collapsible menu at the side of the screen, which a user can access by clicking on it. You will also need to use the open state and setOpen hook from the React state to get the current state of the menu and change it when the button to open it is pressed.

Basic example demonstration on storybook.

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
      <BurgerMenu open={open} onOpenChange={onOpenChange}>
        <h3>Menu</h3>
        <TextInput
          label="Search"
          hideLabel
          placeholder="Search..."
        />
      </BurgerMenu>
  );
}

Custom button example​

You can add a custom button to collapse the burger menu as one of its child elements.

Custom button example demonstration on storybook.

function BurgerMenuCustomButton() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
      <BurgerMenu hideCloseButton {open} onOpenChange={onOpenChange}>
        <Button
                      label="Click the button to close the navigation"
                      hideLabel
                      icon={KeyboardArrowLeftIcon}
                      variant="secondary"
                      onClick={() => onOpenChange(!open)}
                  />
        <h3>Menu</h3>
        <TextInput
          label="Search"
          hideLabel
          placeholder="Search..."
        />
      </BurgerMenu>
  );
}