List navigation

A list navigation makes data structures navigable.

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.

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

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

Behavior

General interaction

  • 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

Ellipsis

If the title, label or description is too long, use an ellipsis at the end. If it is beneficial to the user experience, 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

Context

The navigation list 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

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.

Style

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

Overview

Item states

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

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

Examples

list-navigation-style-overview-background-white
List navigation with white background

list-navigation-style-overview-background-gray
List navigation with gray background

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

Color

The following table gives reference to the different colors and shades used:

Name State Property Color name Modification
List default Background color Gray 100  
List alternative Background color White  
List item default, disabled Background color transparent Opacity 100%
List item current Background color State blue 020  
List item mouseover Background color Gray 200 Opacity 50%
List item pressed Background color Gray 250 Opacity 70%
List item focused Border color Cool blue  
Divider all Border color Gray 250  
Header all Foreground color Gray 800  
Label, icon all Foreground color Gray 800  
Description all Foreground color Gray 650  
Label, icon, description disabled Foreground color as defined with opacity Opacity 50%

Typography

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

Name State Font-family Font-size Line-height Text-align
Header all Siemens Sans Bold 14px 20px left
Label all Siemens Sans 14px 20px left
Description all Siemens Sans 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

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

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