List navigation

A list navigation makes data structures navigable.

Usage

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.

General construction

A list navigation consists of the following elements:

list-navigation-usage-construction
1. Header, 2. List item, 3. Supporting visual, 4. Label, 5. Description, 6. Meta information, 7. Item background

  • 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.

4. Label

  • 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.

5. Description

  • 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:

General construction
1. Header, 2. List item, 3. Drill down action

1. Header

  • 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.

Options

The following list navigation options are available:

Single-line item

A single-line item contains a label.

list-navigation-usage-options-one-line
List navigation with single-line items

Two-line item

A two-line item contains a label and a one-line description.

list-navigation-usage-options-two-lines
List navigation with two-line items

Three-line item

A three-line item contains a label and a two-line description.

list-navigation-usage-options-three-lines
List navigation with three-line items

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 indicator
Hierarchical list navigation with drill down indicator

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.

Hierarchical list navigation with drill down button
Hierarchical list navigation with drill down button

Behavior

General interaction

In a list navigation

  • the entire item is clickable. Click the item to show related information.
  • the header is not clickable.

list-navigation-usage-behavior-item
Mouseover clickable item

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.

Header interaction back button
Header interaction back button

Header interaction title
Header interaction title

Ellipsis

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.

list-navigation-usage-behavior-ellipsis
Label and description with ellipsis at the end

Scrolling

If there are more items than visible, the list may be scrolled. The header is fixed.

list-navigation-usage-behavior-scrolling
List navigation with scroll indicator

Placement

The list navigation can be part of a master detail layout. It is placed in the leading region.

list-navigation-usage-behavior-scenario-master-detail
Master detail layout

Default sorting

It is recommended that items with drill down action come first in a list.

Default Sorting
Default sorting

Do’s & Don’ts

list-navigation-usage-do-dont-icon

  • 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 drilldown functionality

  • Stay consistent with the drill down action.
  • Do not mix drill down indicator with drill down button in one list.

Style

This chapter shows several list navigation styles in the design system.

Overview

Item states

The current item state can be emphasized by a solid icon style.

list-navigation-style-overview-states
1. default, 2. focus, 3. current, 4. mouseover, 5. pressed, 6. disabled

hierarchical-list-navigation-style-overview-button-states-white
1. default, 2. focus, 3. mouseover, 4. pressed

Background

hierarchical-list-navigation-style-overview-background-white
Hierarchical list navigation with white background

hierarchical-list-navigation-style-overview-background-gray
Hierarchical list navigation with gray background

Header

hierarchical-list-navigation-style-overview-header-ellipsis-end
Header with ellipsis at the end of the title

Clickable title

hierarchical-list-navigation-style-overview-header-advanced
1. default, 2. focus, 3. current, 4. mouseover, 5. pressed

hierarchical-list-navigation-style-overview-example-indicator
Hierarchical list navigation with drill down indicators

hierarchical-list-navigation-style-overview-example-button
Hierarchical list navigation with drill down buttons

Examples

list-navigation-style-overview-example1
List navigation in a master detail layout

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
Header all Siemens Sans Bold 14px 20px left
Label all Siemens Sans Regular 14px 20px left
Description all Siemens Sans Regular 12px 16px left

Sizing and spacing

The following measurements show the dimensions for this component:

list-navigation-style-sizing-header
Sizing and spacing for the header

hierarchical-list-navigation-style-sizing-title
Sizing and spacing for the header with back button

list-navigation-style-sizing-items
Sizing and spacing for items: 1. Single-line item, 2. Two-line item, 3. Three-line item, 4. Three-line item without supporting visual

hierarchical-list-navigation-style-sizing-item-sizing
Sizing for the list item with drill down action

hierarchical-list-navigation-style-sizing-item-spacing
Spacing for the list item with drill down action

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top