List navigation

A list navigation makes data structures navigable.

List navigation, basic example

List navigation, states and variants

List navigation header, different variants and combinations of list items and states

Hierarchical list navigation

Hierarchical list navigation, alternative color

Usage

ElementClassDescription
.listNavigation .listNavigation--alternateBgColor Colors the complete list navigation with a white background instead of grey, all child elements are colored white where appropriate, too.
.item__icon   Optional element: adds a supporting visual.
.item__metaInfo   Optional element: adds an icon at the end of a list element to e.g. indicate a status.
.list__item .list__item--oneLine .list__item--twoLine .list__item--threeLine By default a list item is always as tall as there is content in it.
These classes restrict the height of a list item to be in either one line (just the label), two line (label + one line description) or three line.
.list__item .has-overflowIndicator Adds an ellipsis at the end of the description of a list item. The content of the list item always gets hidden if there is not enough space for it.
.item__link .is-activated Sets the list item to the same style as selected usin the mouse.
.item__link .is-current Marks the list item such that it is the currently selected item.
.item__link .is-disabled Disables the list item visually.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top