Burger menu

Burger menu in Storybook

Examples

Coming soon.

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.

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.

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.

Code

The BurgerMenu component renders a burger menu button. When the user clicks the button, it renders a menu populated by BurgerMenuItems.

For examples, see Storybook.

Changelog

Coming soon.