Updated: August 6, 2020

Side Navigation

Information

This control has been designed specifically for the tool landscape for the SAP Cloud Platform. It is not intended for use in regular SAP Fiori applications.

Intro

The side navigation area can be used to display navigation structures with up to two levels. It contains links that change the content area. The side navigation area has three visual states: off-canvas, medium and large. Depending on the device context, two of these states are used per device.

General page structure of a tool with side navigation

Usage

Use the side navigation if:

You need to display global navigation structures of up to two levels.
Your scenarios are in the tooling or administration space.

Do not use the side navigation if:

Your scenarios are not in the tooling or administration space.

Components

Overview

The side navigation area consists of two containers:

1. Main navigation section (top-aligned)

Use the main navigation section for links that navigate within the user’s current work context.

2. 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).

Guidelines

Legal information must always be the last link in the utility section, and thus be located at the bottom of the utility section.

Entries in the side navigation area can consist of text only or an icon with text. The use or non-use of icons must be consistent for all links on one level. Do not combine entries with and without icons on the same level.

We strongly recommend that you do not use icons on the second level.

Side navigation containers

Utility Items

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 area. When the user selects 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.

Another example of this type of link is app-specific settings, which also open in the content area.

The following examples show what such pages can look like. However, this is not part of this specification, so please consider these screens only as possibilities and not as templates you need to follow. It is not yet clear whether we will have a guideline for this type of page.

The utility section should not contain more than three links. Furthermore, it does not contain an overflow mechanism; in other words, these links are always shown.

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 (see examples below).

Example of a 'Useful Links' page

Example of a 'Legal Information' page

Behavior and Interaction

Toggle Between Side Navigation States

The side navigation area has three visual states:

Expanded (everything is shown: icons and/or text)
Condensed (only icons are shown: text-only condensed state is not supported)
Off-canvas (side navigation is completely off-screen, and can be triggered via the menu icon in the tool header)

Side navigation - Expanded

Side navigation - Condensed

Side navigation - Off-canvas

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 tool header.

Guidelines

Persist the view settings: when a user reopens the app, show the state with the same settings as last defined by this user.

Open an Entry

Clicking a link in the side navigation changes the information in the content area. If this also changes the object displayed in the content area, the state of the breadcrumb changes as well.

When users click an entry in the side navigation, always stay within the current app. Don’t navigate away from the app or open the content in a new browser tab.

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

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.

Side navigation with one level of navigation

Navigate Two Levels

This consists of two levels of entries. 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.

Side navigation with two levels of navigation

Responsiveness

When the user resizes the browser window, and the height of the window is reduced, the space between the main navigation container and the utility section container shrinks to a minimum height. A scrollbar then appears in the main navigation section. This section also has its own overflow mechanism.

Top Tips

General

The side navigation has two footprint options: icon only and icon plus text.
It allows for a maximum of two levels of navigation; all further levels should be displayed in the content area.
Do not show lists of dynamic content in the side navigation. For example, do not show a list of favorite applications in the side navigation as it may change over time.
Set the initially displayed item to “selected” using the association association:selectedItem.

Utility Section

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

Fiori Design Guidelines