Intro

The side navigation component provides a vertical menu, allowing users to easily access different sections or pages within an application. It is accessed via the hamburger menu located in the shell bar. The side navigation operates in two modes: embedded and overlay. In embedded mode, users can expand or collapse the side navigation using the hamburger menu button. This mode supports up to 3 levels of nested items.
Launch modal

Side navigation – embedded expanded (left), embedded collapsed (center), overlay mode (right)

Anatomy

Anatomy of the side navigation

1. Main navigation area: This area includes primary navigation elements, such as navigation groups (4), navigation list items (3, 5), and navigation child items (6). It features its own scrolling section.
2. Fixed footer area: The footer area remains visible at all times and does not scroll away. It is separated visually by a divider. Position frequently accessed actions, such as quick creates, in the footer area.
3. Navigation item (without nested navigation elements): A navigation item without nested elements consists of text and an icon. In collapsed mode, only the icon is displayed.
4. Navigation group: This group can be collapsed or expanded and contains navigation list items. It is not displayed when the side navigation is collapsed.
5. Navigation item (with nested navigation elements): A navigation item with nested navigation subitems, which can be collapsed or expanded.
6. Navigation subitem: A navigation subitem is nested under a navigation item and displays only text.
7. Quick action: A quick action enables users to access frequently required actions efficiently, allowing them to perform tasks with minimal clicks.
8. External link: A navigation item with an external link.
9. Popover navigation for subitems: When the side navigation is collapsed, subitems appear in a popover.

Behavior and Interaction

The examples below illustrate how to collapse the side navigation in embedded mode and how it opens in overlay mode.

Collapsing the side navigation in embedded mode

Opening the side navigation in overlay mode

The example below shows the interaction when expanding navigation groups and elements. If needed, a scroll bar appears. The fixed footer remains in place.

Expanding navigation groups and navigation items

Expanded mode: Navigation element interaction, selection indication

Collapsed mode: Navigation element interaction, selection indication

Responsiveness

On touch devices like tablets and laptops, the side navigation appears in overlay mode. On phones, it displays full screen within a dialog.

Side navigation on a tablet

Side navigation on a phone

In collapsed mode, navigation elements shift into the overflow area if space is limited. Selecting an overflow element brings its parent navigation element into view above the overflow button.

Embedded mode – collapsed overflow

Guidelines

• Label each navigation item clearly and descriptively.
• Group related items for quick information access.
• Limit the fixed footer to 4 elements.
• Name the first element "Home" and link it to the entry page.
• Use the side navigation in embedded mode for easier discovery.

Related Links