Intro

information

This component is relevant for the UX Consistency Product Standard UXC-026 – Side Navigation.

Intro

The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded panel or as an overlay. In embedded mode, the navigation can be expanded or collapsed using the side navigation button. In overlay mode, the button opens the navigation as an overlay.

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

When to Use

false

Use side navigation:

As the main navigation paradigm across the application, to navigate to multiple targets.

dont

false

Don't use side navigation:

For structuring the application layout or implementing application-specific logic.
If your product has only a single navigation target.
In a combination of embedded and overlay modes. Use either of them.

Use the side navigation in embedded mode for easier discovery.
Label each navigation item clearly and keep the text short to avoid wrapping.
Group related items for quick access to information.
We recommend using only one action button in the side navigation footer, focusing on the most essential task. Don't nest elements in the footer area.
The first element must be called "Home" and linked to the entry page.

Anatomy

Anatomy of the side navigation

Main navigation area: This area contains primary navigation elements, including navigation groups (4), navigation list items (3, 5), and navigation child items (6). It has its own scrolling section.
Fixed footer area: The footer area remains fixed and always visible, independent of the main navigation scroll. A divider visually separates it from the navigation content. The footer provides access to a primary action through a quick action button and offers entry points to key areas of the product. Limit the fixed footer to a maximum of four elements: one action button and up to three navigation list items. For phone-first use cases, limit the footer to a single element: either an action button or a list item.
Navigation group: The side navigation supports up to three levels of nested items. The navigation group is the topmost, non-interactive, text-only level grouping. It can be expanded or collapsed to show or hide its nested navigation list items (which may further contain nested child items). When the side navigation is collapsed, navigation groups are hidden and indicated only by visual spacing.
Navigation item: A navigation list item consists of text and an icon and may optionally have a navigation target.
a. Without nested navigation elements: A navigation item without nested child items always has a navigation target. In collapsed mode, only the icon is displayed.
b. With nested navigation elements: A navigation item with nested navigation subitems, which can be collapsed or expanded.
Navigation child item: A navigation child item is nested within a navigation item and typically displays text only. If the child item opens an external link, an arrow (:icon-arrow-right) appears on the right to indicate an external link.
Quick action: Quick actions let users access the most common tasks quickly. The fast action button must always be placed at the top of the footer area.
External link: A navigation item with an external link that opens in a new tab or window, outside of the current application. External link is indicated by the right arrow icon (:icon-arrow-right) on the right.
Child items in collapsed mode: When the side navigation is collapsed, the child items appear in a popover.
Overflow in collapsed mode: When there isn't enough space in the main navigation area while in collapsed mode, the remaining navigation items are moved into a popover menu. If a navigation item contains child items, they are displayed in a cascaded menu.
Overlay mode: Displays the expanded side navigation as a popover. In this mode, selecting the side navigation button closes the popover instead of collapsing the navigation.

Behavior and Interaction

Embedded Mode

In embedded mode, the side navigation button expands or collapses the panel.

Expanding and collapsing the side navigation in embedded mode

Overlay Mode

In overlay mode, the side navigation button opens and closes the popover. When a navigation item is selected, the popover closes.

Opening the side navigation in overlay mode

When users trigger a navigation group, it expands to reveal its navigation items. The side navigation supports up to three levels. If there are more items than fit in the area, a scroll bar appears. The fixed footer always stays in place.

Expanding navigation groups and navigation items

Expanded mode: Navigation element interaction, selection indication, and collapsing

In collapsed mode, the child items appear in a popover.

Collapsed mode: Navigation element interaction, selection indication

In collapsed mode, navigation elements move into the overflow area when space is limited. If a navigation item in the overflow area contains child items, they are displayed in a cascaded menu.

Selecting an overflow element brings its parent navigation element into view above the overflow button.

Embedded mode – collapsed state overflow

Responsiveness

Embedded Mode

In embedded mode, the side navigation remains embedded across all screen sizes until it reaches the breakpoint at 600px (or size S).

Responsiveness for screen sizes up to size M

Users can choose to collapse the side navigation using the side navigation button.

Expanded and collapsed modes in embedded mode

On size S (600px) for non-touch devices, and on phones, it switches to a full-screen slide-in overlay over the content area. The side navigation will be hidden and can be opened using the side navigation button. On phones, the side navigation is displayed in full-screen mode over the content area, regardless of device orientation.

Side navigation on size S and phones

Overlay-Only Mode

On the web and tablets, the side navigation appears as a responsive popover for all sizes. It follows the responsive behavior of the responsive popover control.

Overlay mode – in web and tablets

When navigation items are expanded, the overlay grows in height to display the expanded content. If there is more content than the popover's height, a scrollbar appears, and the fixed footer remains at the bottom of the popover.