Skip to main content

BurgerMenu

BurgerMenu in Storybook
Note: This component is to be used only under the scope of the page layouts UX patterns and not to be used in isolation or custom scenarios.

For documentation about the burger menu component for Header UX patterns, see this page.

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>
  );
}