Overview
Over the years, navigation became one of the signature design elements of BTP Tools. Traditionally BTP tools are monolithic products with complex information structures. Designing their navigation requires careful consideration and insists on flexibility.
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
Data and Analytics - Side Navigation
Navigation Types
The design of the four variants of BTP navigations accommodates the complex scenarios the tools have to cover. Each variant has advantages in transporting the user to their destination while keeping them informed of their location.
Vertical Navigation - Expanded
The default navigation visualization provides a logical grouping of navigation items and two levels of hierarchy.
Vertical Navigation - Snapped
The snapped vertical navigation variant reduces the navigation width to free horizontal space.
Vertical Navigation - Popup
An alternative to the expanded/snapped variant, which places the navigation items in a popup.
Horizontal Navigation
The horizontal variant allows for infinite levels of navigation hierarchy through cascading menus.
When to use
Recommended
- Use the navigation to switch between different pages of your tool.
- Use expanded vertical navigation for unknown users.
- Use persistence and display the last state the vertical navigation was in for known users.
- Use the snapped variant when the content area displays multi-column content relationships.
- Use the popup variant to display between 3 and 7 navigation items without hierarchy.
- Use the horizontal navigation variant to display more than two levels of hierarchy.
- Use nouns for the titles of navigation items.
Not Recommended
- Avoid using the navigation for switching between tools. Use product switch instead.
- Avoid using the navigation to switch contexts or views. Use tabs or segmented buttons instead.
- Avoid using verbs for the titles of navigation items. Use nouns instead.
- Avoid using the Navigation Items for both navigation and groups. Use only one of the options.
- Avoid having more than three levels of hierarchy in the horizontal variant.
- Avoid using icons in secondary navigation and navigation groups.
- Avoid using spacers to separate navigation content. Use separators instead.
- Avoid using dividers to separate groups. Use separators instead.
- Avoid using the footer navigation area for service information. Use settings and user menu instead.
See also:
Anatomy
Vertical Navigation
Vertical navigation is the most common and preferred way of navigating BTP tools. It comprises many elements that work together to provide a logical information hierarchy and inform users of their current position.
The popup variant of the vertical navigation is identical in content to the expanded variant. The difference between the two is that the popup variant displays the navigation items as a dropdown.
Horizontal Navigation
The Horizontal Navigation Variant is an alternative display of navigation items stacked horizontally. There are no groups in this variant, and it allows for infinite levels of navigation hierarchy through cascading menus.
Interaction - Vertical Variants
Home (Mandatory)
The Home navigation item is mandatory for all tools that use vertical navigation. Consider consistently placing it as the first item in the navigation on the very top. The Home navigation always leads to the main page of the tool. In functionality, it duplicates clicking on the SAP logo in the Tool Header.
Separators
Use separators to visually group navigation items. Consider placing a separator above each Navigation Group to ensure proper item grouping in the snapped navigation variant.
Separators
Navigation Group Item and Snapped Navigation Group
The Navigation Groups cluster navigation items together and do not offer navigation capabilities. Instead, they function as Panels that expand and collapse to reveal or hide navigation items. While hovering a Navigation Group, a small arrow icon shows the group's expanded/collapsed state.
Selected and Disabled State
- The Navigation Group Items have no selected state.
- The Navigation Group Items have no disabled state.
Navigation Groups
When switching from expanded to the snapped variant of the vertical navigation, all groups automatically grow, and all group names disappear. In contrast, when transitioning from snapped variant to the expanded variant, all groups revert to their previous state. If there is no previous state, all Navigation Groups remain expanded.
Parent Navigation Item and Snapped Navigation Item Title
The Parent Navigation Items are the primary carriers of product navigation. They are interactive UI elements, and clicking on them takes the user to a new page in the tool. Each Parent Navigation Item must provide both an icon and a title. In the snapped variant, Parent Navigation Items display only the icon. In that mode, the title appears when hovering or focusing on an item.
Selected State
- When the Parent Navigation Item is a single-click area item it does not have a selection state.
Disabled State
- When the parent navigation item is disabled the child items are also disabled.
- When the parent navigation item is disabled the expand/collapse functionality does not work.
- This interaction is true for both single and dual-click area navigation.
Navigation Item
The Parent Navigation Item can function as a Navigation Group. A small arrow icon shows the item's expanded/collapsed state in this scenario. In the snapped variant, clicking on such a navigation item will open a popover that displays the title and Child Items.
Navigation Item - Interaction
Although not recommended, the Navigation Item can function for navigation and expansion/collapse. In this case, clicking on the arrow will show/hide Child Items, and clicking on the item will perform the navigation.
Behavior in Snapped Mode
Interaction behavior in snapped mode
In snapped mode, parent navigation items without children can be selected directly. When hovered they grow to show the title of the parent. When selecting a paremt item it shrinks to its icon-only size. On subsequent hover or focus, the item grows again to show the title.
Hover and Focus in Snapped Mode
- When hovering and focusing in snapped mode expand the navigation item.
- If the parent navigation item has children, show the has children indicator.
- If the parent navigation item is an external link, show the external link indicator.
Item Selection in Snapped Mode
- When selecting an item in snapped mode do not expand the item immediately after selection. Expand it on subsequent hover or focus.
- When selecting a child or a parent from a two-click area parent, do not expand the item immediately after selection. Expand on subsequent hover or focus.
- When selecting a child item from the popup, update the expanded text to match the item name. Keep the parent icon unchanged.
Child Navigation Item and Snapped Child Item Popup
Child Items represent the second level of hierarchy in navigation. They are single interaction elements and do not have children themselves. Child Navigation Items do not require icons to differentiate them. In snapped variant Child Items are not displayed. They appear in a popup after clicking the parent Navigation Item.
Child Items
Behavior in Snapped Mode
Interaction behavior in snapped mode
In snapped mode, parent navigation items with children cannot be selected directly. When clicked they will display in their active state and open a popup. The popup contains a title showing the parent item name and children that can be selected to perform the navigation. When a child is selected, the popup closes and the parent item is selected. Additionally the parent item name is replaced by the child item name and is shown on subsequent hover or focus events.
In two-click parent item scenarios. The title in the popup can be used to select the parent item. This behavior, however is not recommended.
Spacer
The Spacer, which is placed immediately after the last Navigation items serves to take all available space and position the Divider and the Fixed items at the bottom of the vertical navigation.
Footer and Divider (Not Recommended)
The Footer navigation area is always visible and consists of two elements: Divider and Parent Navigation Items. The latter is technically referred to as Fixed Items. Those typically link to help, settings, legal information, etc. Such links are not essential for the tool's navigation. Consider placing them in the Settings Menu or the User Menu instead.
Spacer, Divider, Fixed Item
Not Recommended
- If you must use the footer area, do not have both parent and child navigation items. Have only parents.
The Divider displays a horizontal line separating two navigation areas.
The Fixed Item functions identically to the Navigation Item.
Overflow
The content of the navigation may exceed the space provided by its container. When that happens, the vertical variant should allow scrolling of the navigation items. In the snapped variant, instead of scrolling, an Overflow button appears. Clicking this button displays a list of the overflown Navigation Items. If needed, that list cascades with sub-menus.
Vertical Overflow
Clicking an item from the overflow makes it (or its parent Main navigation item) enter a selected state and appears as the last item in the navigation.
Overflow Reordering
See also
Interaction - Horizontal Variant
Home (Mandatory)
The Home navigation item is mandatory for all tools that use horizontal navigation. Consider consistently placing it as the first item in the navigation at the beginning. The Home navigation always leads to the main page of the tool. In functionality, it duplicates clicking on the SAP logo in the Tool Header.
Parent Navigation Item
The Parent Navigation Items are the primary carriers of product navigation. They are interactive objects, and clicking on them takes the user to a new page in the tool. Each Navigation Item must provide both an icon and a title.
Horizontal Navigation Item
The Navigation Item can function as a Navigation Group. A small arrow icon indicates that clicking the item will open a popover that displays the Child Items.
Child Navigation Item
Child Items are single interaction elements and represent the deeper levels of hierarchy in navigation. Visually Child Navigation Items do not require icons to differentiate them. In the horizontal variant, Child Items can have children themselves. Consider placing all Child Items with children on the top of the list.
Horizontal Child Items
After navigating via a Child Item, the corresponding parent Navigation Item enters its selected state to identify the selection. Opening a selected Navigation Item transitions it into the active state and shows a popup where the child is selected. This interaction continues in child items when the selected Child Item is deeper in the hierarchy.
Overflow
An Overflow button appears when the horizontal variant has too many Navigation Items. Clicking this button displays a list of the overflown Navigation Items. If needed, that list cascades with sub-menus, as explained with the child items above.
Horizontal Overflow
Clicking an item from the overflow makes it (or its parent Main navigation item) enter a selected state and appears as the last item in the navigation.
External Links
On occasion, it is needed to link external resources to the application. Such functionality is available in the navigation concept. Those are external link navigation items and are available in both horizontal and vertical variants, as well as the parent and child navigation item style.
Parent Navigation Item - External
Child Navigation Item - External
- Add an arrow indicator to indicate an external link
- Open the link in a new browser tab
- Don't make the navigation items for external links selectable.
Keyboard Handling
Vertical Variants - Keyboard Handling
Selecting Parent Item - Keyboard Handling
Horizontal Variant - Keyboard Handling
Screen Reader
Vertical Variants - Screen Reader
Parent Menu Item - Screen Reader
Horizontal Variant - Screen Reader
Responsiveness
Having a responsive behavior for navigation is essential. It makes the content accessible on all devices. On mobile devices, the navigation UI elements switch to the Cozy Form Factor.
See also:
Responsive Design - Design Guideline
Tablet Behavior
The behavior of the navigation on tablet devices remains essentially unchanged.
Tablet Anatomy - Snapped
The expanded variant automatically snaps to free space for the content on tablets. The snapped variant is unchanged.
Tablet Anatomy - Popup
There are no changes to the popup variant behavior on tablets.
Tablet Anatomy - Horizontal
There are no changes to the horizontal variant behavior on tablets.
Phone Behavior
Mobile phone navigation behavior changes significantly from desktop and tablet counterparts. On phones, the navigation uses only the popup variant. Additionally, the structure and behavior of the content adapt depending on the variant type used on desktops and tablets.
Vertical Variants
Horizontal Variant
Resources
Design
HorizontalNavigation - Visual Design Specification
Vertical Navigation - Visual Design Specification
Code Samples
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.