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

Usage

Coming soon.

Code

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

Import statement

import { BurgerMenu } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

childrenrequired

Type

React.ReactNode

Description

The children elements to render inside the component.

hideCloseButton

Type

boolean

Description

If set to true, the Close button is not rendered.

onOpenChange

Type

(open: boolean) => void

Description

Callback to run when the burger menu is opened or closed.

open

Type

boolean

Description

If set to true, the burger menu is currently open.

Hooks

No hooks are available for burger menu.

Translation keys

The burger menu component defines two translation keys:

Key	Used for
jutro-components.BurgerMenu.openButtonLabel	Describing the look and function of the open button.
jutro-components.BurgerMenu.closeButtonLabel	Describing the look and function of the close button.

Escape hatches

For more information, see our documentation about escape hatches.

Changelog

10.10.0

Burger menu component added.