BurgerMenu
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.ReactNodeDescriptionThe children elements to render inside the component.
hideCloseButton- Type
booleanDescriptionIf set to
true, the Close button is not rendered. onOpenChange- Type
(open: boolean) => voidDescriptionCallback to run when the burger menu is opened or closed.
open- Type
booleanDescriptionIf 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.