Date: 12.10.2020
Platform: Web
Designer: Luke Shi
Intro
Sub-navigation/Shell navigation defines the 2nd-level nav links based on the module selection on the first level.
In the old Biz-X system there was a visual split between the shell navigation and the home/shell header, which made these important navigation links blended into the contents:
Usage
The shell navigation offers users direct access to the most frequently used pages and spaces so they need to be emphasized. By visually connecting the navigation to the shell header, we create a more perceptible difference between the tab navigation within the content application pages and the home page shell navigation. As it is a main part of the overall home concept, the adaption of the shell header design for the navigation is just a logical step toward a seamless and intuitive user experience. It also brings a stronger visual consistency with the Quartz theme on mobile and desktop.
Responsiveness and Adaptiveness
The sub-nav links adjust to different screen sizes. If used, the links should overflow when the screen gets narrowed. (following example shows the concept design for Recruiting UXR which is still in discussion stage)
Specification Resource
The new shell navigation design will also be part of the next UI5 1.83 release and is now part of the cross technology.
For more specific font size, colors please refer to: Fiori Visual Core Specification.