Burger menu

Burger menu in Storybook

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

For documentation about the burger menu component for page layout 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 burger menu

A basic burger menu is a button inside a header that can be used to open a menu. The menu is defined by the burgerContent property which can contain an array of nodes. There are specific components for burger items like BurgerMenuItem and BurgerMenuLink that can be used in the burgerContent array.

Basic example demonstration on storybook.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem key="item" id="item" isContainerOnly>Menu Item</BurgerMenuItem>,
      <BurgerMenuLink key="link" id="link">Menu Link</BurgerMenuLink>,
    ]}
   />
</Header>

Usage

Overview

The burger menu component replaces the standard global header and navigation on mobile and tablet devices or on demand by changing its configuration.

Anatomy

The burger menu component consists of the following elements:

1. Burger menu button icon: used to open product navigation.
2. Burger menu container: organizes navigational elements and other content that isn't critical to the user's immediate goal, such as settings and help.
3. Close button icon: dismisses the burger menu.
4. Search input field: enables users to perform a search.
5. Application navigation: menu items and navigational elements that users can select.
6. Application switcher: enables users to switch applications.
7. User avatar: includes the user's full name and avatar links.
8. Global header: includes the notifications bell icon.

Best practices

• The burger menu should display instead of the desktop navigation on mobile and tablet devices.
• Use the burger menu for navigational elements that don't directly service the goal of your application. This helps to focus the user's attention on the primary task.

Responsiveness/Adaptiveness

The burger menu has a fixed width.

Interactions

1. Clicking on the burger menu icon triggers a collapsible navigation panel. Users may dismiss the burger menu by clicking the close X button icon.
2. Users may navigate within the application by clicking menu item links.
3. Users may switch between applications by clicking the application switcher, which opens a dropdown with a list of applications.
4. Users may display notifications by clicking on the notifications bell icon.

UX writing considerations

• Labels for menus and menu items should be accurate and informative.
• Write labels that are concise and clearly communicate the purpose of the selection.
• The majority of links should be nouns. For example, the user Profile page.
• Each menu item should appear as a single line of text.
• Use sentence case in most instances, including headings and titles, menu names and menu items and navigation elements. It supports a friendly and conversational style and is easier to translate for non-U.S. markets and products. The exceptions will be things like proper nouns, proper names, and titles before names.

Code

Basic example demonstration on storybook.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem key="item" id="item" isContainerOnly>Menu Item</BurgerMenuItem>,
      <BurgerMenuLink key="link" id="link">Menu Link</BurgerMenuLink>,
    ]}
   />
</Header>

Import statement

import { BurgerMenu, BurgerMenuItem, BurgerMenuLink } from '@jutro/router';

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

Burger menu props

burgerContent

Type

node[]

Description

Elements to render in the sidebar.

buttonClassName

Type

string

Description

An optional CSS class for the burger menu button.

className

Type

string

Description

CSS class name for this component.

closeOnItemClick

Type

bool

Description

If set to true, clicking items on the burger menu which does not change browser location will cause the menu to close. This can be overwritten per item by setting a closeOnClick property on it. Note that if an item changes browser location, the menu will always be closed.

separatorClassName

Type

string

Description

An optional CSS class for the burger sidebar separator.

Burger menu item props

idrequired

Type

string

Description

Unique identifier for the component.

className

Type

string

Description

CSS class name for this component.

closeOnClick

Type

boolean

Description

If set to true, clicking this item will close the burger menu. Note that if an item changes browser location, the menu will always be closed.

hideSeparator

Type

boolean

Description

If set to true, it will not render a separator.

isContainerOnly

Type

boolean

Description

If set to true, the item will be rendered without 'interactive item' styling. This does not affect any attached event handlers.

separatorClassName

Type

string

Description

The CSS class name for the menu item separator.

separatorClassName

Type

React.ElementType

Description

The HTML tag which will be used to render item.

Default value

div

Burger menu link props

idrequired

Type

string

Description

Unique identifier for the component.

children

Type

React.ReactNode

Description

The content of the item.

hideSeparator

Type

boolean

Description

If set to true, it will not render a separator.

seperatorClassName

Type

string

Description

An optional CSS class for the burger sidebar item separator.

Hooks

No hooks are available for burger menu.

Translation keys

There are three translation key associated to the burger menu component:

Key	Used for
jutro-router.BurgerMenu.Open Menu	aria-label value for the open menu button
jutro-router.BurgerMenu.Menu header title	aria-label value for the header title
jutro-router.BurgerMenu.Close navigation	aria-label value for the close navigation button

Escape hatches

For more information, see our documentation about escape hatches.

Changelog