The side navigation area can be used to display navigation structures with up to two levels. It contains links that change the content in the main 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.
Responsiveness and Adaptiveness
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. You must not combine entries with and without icons on the same level.
We strongly recommend that you do not use icons on the second level.
The side navigation area has three visual states: off-canvas, medium and large. Depending on the device context, only two states are used per device. App developers may choose the default state for each device. The user toggles through these states by clicking on the navigation icon that is part of the tool header. Persist the view settings: when a user reopens the app, show the state with the same settings as last defined by this user.
If icons are used on the first level and the app is running on a desktop, there is a large and a medium state. The user can toggle between these states by clicking on the menu icon in the tool header. The large state shows all content of the navigational structure. The medium state shows only the icons on the first level. If the user clicks or taps on such an icon, a flyout navigation menu is triggered, showing the first-level item and all second-level items. If a first-level or second-level item is clicked or tapped in the flyout menu, the navigation is triggered and the content section is updated. If there are no second-level items at all, the navigation is triggered directly to prevent inconsistent behavior in the case of mixed entries (entries with or without second-level navigation). The flyout menu is closed after a navigation action, or if the user clicks or taps anywhere outside the flyout.
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.
The side navigation area consists of two containers: the main navigation section (top-aligned) and the utility section (bottom-aligned). Use the main navigation section for links that navigate within the user’s current work context. Use the utility section for content like legal information (such as links to central SAP pages), or for links to additional information that may be of interest (for example, developer communities, external help, and so on). Legal information must always be the last link in the utility section, and thus be located at the bottom of the 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 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 image below).
Behavior and Interaction
Open an Entry
Clicking on a link in the side navigation changes the information in the content area and also the state of the breadcrumb if the navigation changes the current object displayed in the content area. When users click on an entry in the side navigation, they should never be navigated away from the current app but always remain within the app, and content should never open on a new browser tab.
Navigate One Level
- When the user clicks on 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 entries. The entries on the first level can be navigational links or just 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 on the collapse/expand icon.
- Only use a group if at least two navigation links are available within the group.
- 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.
- 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
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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.