Intro

The side navigation is a UI component that is available in the CX package of Fundamental Styles and Fundamental NGX. It is designed for consistent use in CX applications.

The side navigation can be used to display navigation structures with up to three levels: first-level, and second-level items which may be navigable or act as containers, and third-level items which are always only navigable.

It has three visual states: Invisible, Narrow, and Wide. Depending on the device context, two of these states are used per device.

Side navigation in its ‘hidden’, ‘narrow’, and ‘wide’ state.

When to Use

Components

The side navigation consists of two containers:

1. The main navigation section (top-aligned)
   Use the main navigation section for links that navigate within the user’s current work context.
2. The utility section (bottom-aligned)
   Use the utility section for legal information (such as links to central SAP pages), or for links to additional information that may be of interest (for example, developer communities, SAP Help Portal, and so on).

Anatomy of the Side Navigation

Behavior & Interaction

Toggle Between Side Navigation States

The side navigation area has three visual states:

• Wide (everything is shown: icons and/or text). This state can be used in a ‘push content’ mode and an ‘overlay’ mode.
• Narrow (only icons are shown: text-only condensed state is not supported)
• Invisible (side navigation is completely off-screen, and can be triggered via the menu icon in the tool header)

Depending on the device context, only two states are used per device. App developers can choose the default state for each device. The user toggles through these states by clicking the navigation menu icon that is part of the shell bar.

Side Navigation in its ‘hidden’, ‘narrow’, and ‘wide’ state.

Open an Entry

Clicking a link in the side navigation changes the information in the content area.
Don’t navigate away from the app or open the content in a new browser tab when users click an entry in the side navigation.

In the ‘Narrow’ visual state, clicking an icon triggers a fly-out navigation menu, showing the first-level item and all second- and third-level items.
Clicking a first-level, second-level, or third-level item in the fly-out menu triggers the navigation and updates the content section accordingly. If there are no second-level, or third-level items, the navigation is triggered directly. This prevents inconsistent behavior when you have a mix of entries (entries with and without second- or third-level navigation). The fly-out menu is closed after a navigation action, or when the user clicks anywhere outside the fly-out.

Navigate One Level

When the user clicks a navigation link, the content area is updated. Clicking a link in the side navigation area should never open a new browser window, tab, or popup; the content area should always be updated. There is only one level of navigation; all further navigation is shown in the content area.

Navigate Two Levels

This consists of two levels of navigational entries in the side navigation. The entries on the first level can be either navigational links or group headers (that is, texts that do not trigger navigation themselves). If there is a second level behind a first-level entry, the user can collapse and expand it by clicking the collapse/expand icon.
Only use a group if at least two navigation links are available within the group. If some of the subitems in a group are sometimes hidden, it is recommended to keep the group even when only one subitem is visible. Clicking an item in the side navigation area should never open a new browser window, tab, or popup; the content area should always be updated. There are only two levels of navigation; all further navigation is shown in the content area.

Navigate Three Levels

This consists of three levels of navigational entries in the side navigation. The entries on the first level can be either navigational links or group headers (that is, texts that do not trigger navigation themselves). If there is a second level behind a first-level entry, the user can collapse and expand it by clicking the collapse/expand icon. The same is true for third-level entries.

Utility Section

Utility items, such as legal information and links to communities should be located at the bottom of the side navigation in the utility section. This must always be visible and does not have an overflow.
No more than three of these links should be displayed in the side navigation. When the user clicks in these items, they display representations in the content area, where further links to, for example, legal resources or sap.com can be displayed. The links in the content area should then open a new browser tab to display the information, which should be consistent throughout the SAP system.
If there is too much content to fit into the maximum three links of the utility section, you should group the corresponding links into pages that are shown when the user clicks the entry.
Legal information must always be the last link in the utility section, and thus be located at the bottom of the utility section.

Responsiveness

The following shows an ‘L’-size screen with the Side Navigation in its ‘Wide’ state. In screens same or larger that size ‘L’, it is recommended to use either the ‘Wide’ or the ‘Narrow’ variant.

The following shows an ‘M’-size screen with the Side Navigation in its ‘Narrow’ state. For ‘M’ size screens, it is recommended to use either the ‘Narrow’ or the ‘Hidden’ variant.

The following shows an ‘S’-size screen with the Side Navigation in its ‘Hidden’ state. In ‘S’ size screens, it is recommended to use the ‘Hidden’ variant. The Side Navigation is then not shown per default, a tap on the Burger Menu will open the Side Navigation in full screen.

Examples

High-fidelity mockup with visual design. Shows the element in a typical context including the shell, etc.

Top Tips

General

• Keep the navigation items stable and do not show lists of dynamic content in the side navigation.
• The side navigation allows for a maximum of three levels of navigation; all further levels should be displayed in the content area.
• Do not open another browser tab or window from the any o the side navigation’s items; always update the content area.

Utility Section

• There can be a maximum of 3 links in the utility section.
• Legal information must always be the last link in the utility section.

Related Links