When to use
Use a list navigation in the following cases:
- To represent data structures in a scannable way and make them navigable.
- To select a detail view in a master detail layout.
Use a hierarchical list navigation in the following cases:
- To navigate between different hierarchical levels.
- When it is not necessary to see different levels at the same time.
A list navigation consists of the following elements:
- The header contains a title which explains the context of the items below.
2. List item
- The list item represents a navigational step and consists of the elements 3. – 7. as listed below.
- Be consistent when constructing your list items. For example, each list item or none has a supporting visual.
3. Supporting visual
- The supporting visual may be an icon, pictogram (for example avatar) or an image.
- The supporting visual is used exclusively for classification.
- The supporting visual is optional.
- The label summarizes the content of an item.
- The label is often equal to the title of the related domain object.
- The label is mandatory.
- The description text is used to give additional content-related information.
- The description is optional.
6. Meta information
- The meta information element can be an icon (e.g. severity state).
- The meta information is optional.
7. Item background
- The item background inherits the background color of the container element.
A hierarchical list navigation consists of the following elements:
- A hierarchical list navigation must have a back navigation which is greyed out or vanishes at the root level.
- The header always contains a title indicating the current level.
2. List item
- See above for further information.
3. Drill down action
- A drill down action can be a drill down indicator or drill down button depending whether the item itself has own content or not.
- A drill down action is used when an item has child items.
The following list navigation options are available:
A single-line item contains a label.
A two-line item contains a label and a one-line description.
A three-line item contains a label and a two-line description.
Hierarchical list navigation with drill down indicator
Use a drill down indicator when the item is a container for child items and has no content itself. It cannot be selected without navigating into the next level.
Hierarchical list navigation with drill down button
Use a drill down button when the item is a container for child items and has additional own content. It has a select option for example to show a state or basic information in the main region.
In a list navigation
- the entire item is clickable. Click the item to show related information.
- the header is not clickable.
In a hierarchical list navigation
- the back button leads back to the previous hierarchy level.
- the title is clickable. Click the item to show related information.
If the title, label or description is too long, use an ellipsis at the end. If necessary the ellipsis can be placed in a different position, for example in the middle.
If there are more items than visible, the list may be scrolled. The header is fixed.
The list navigation can be part of a master detail layout. It is placed in the leading region.
It is recommended that items with drill down action come first in a list.
Do’s & Don’ts
- Use an icon as supporting visual exclusively for classification. Use an icon as meta information to show the state.
- Do not use the supporting visual to show the state or meta information.
- Stay consistent with the drill down action.
- Do not mix drill down indicator with drill down button in one list.
This chapter shows several list navigation styles in the design system.
The current item state can be emphasized by a solid icon style.
The following table gives reference to the different font sizes and weights:
|Header||all||Siemens Sans Bold||14px||20px||left|
|Label||all||Siemens Sans Roman||14px||20px||left|
|Description||all||Siemens Sans Roman||12px||16px||left|
Sizing and spacing
The following measurements show the dimensions for this component: