Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

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

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

#### 1. Header

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

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 with single-line items

#### Two-line item

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

List navigation with two-line items

#### Three-line item

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

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

### Behavior

#### General interaction

In a list navigation

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

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

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 with scroll indicator

#### Placement

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

Master detail layout

#### Default sorting

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

Default sorting

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

## Style

This chapter shows several list navigation styles in the User Experience Toolkit.

### Overview

#### Item states

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

1. default, 2. focus, 3. current, 4. mouseover, 5. pressed, 6. disabled

1. default, 2. focus, 3. mouseover, 4. pressed

#### Background

Hierarchical list navigation with white background

Hierarchical list navigation with gray background

#### Header

Header with ellipsis at the end of the title

##### Clickable title

1. default, 2. focus, 3. current, 4. mouseover, 5. pressed

Hierarchical list navigation with drill down indicators

Hierarchical list navigation with drill down buttons

#### Examples

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 Roman | 14px | 20px | left
Description | all | Siemens Sans Roman | 12px | 16px | left

### Sizing and spacing

The following measurements show the dimensions for this component:

Sizing and spacing for the header

Sizing and spacing for the header with back button

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

Sizing for the list item with drill down action

Spacing for the list item with drill down action

To see a detailed explanation of all existing helper and size classes, please refer to the usage table below.

## List navigation, basic example

Very simple List navigation

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item B

  This is a list item. There is a status set to indicate something important.

- #### List item C

  This is a list item. There is a status set to indicate something important.

- #### List item D

  This is a list item and there is a status set to indicate something important.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

    <div class="listNavigation">
        <div class="listNavigation__lists">
            <div class="listNavigation__header">
                Very simple List navigation
            </div>
            <ul class="listNavigation__list">
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item D</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## List navigation, states and variants

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

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item A

  This is a list item and there is a status set to indicate something important.

- #### List item one line

  This is a one line list item with some descriptional text.

- #### List item two line

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item two line with overflow indicator

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line with overflow indicator

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item, disabled

  This is a list item. There is a status set to indicate something important.

- #### List item, current

  This is a list item. There is a status set to indicate something important.

    <div class="listNavigation">
        <div class="listNavigation__lists">
            <div class="listNavigation__header">
                List navigation header, different variants and combinations of list items and states
            </div>
            <ul class="listNavigation__list">
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--oneLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item one line</h4>
                            <div class="description">This is a one line list item with some descriptional text.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line with overflow indicator</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line with overflow indicator</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-disabled">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, disabled</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-current">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, current</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## Hierarchical list navigation

Hierarchical list navigation

- #### List item A

  This is a list item with drilldown action and there is a status set to indicate something important, wrapping over more lines to show that the 'hit area' for the drilldown button on the right stretches over the whole row from top to bottom.

- #### List item B

  This is a list item with drilldown action and there is a status set to indicate something important.

- #### List item C

  This is a list item and there is a status set to indicate something important.

- #### List item one line

  This is a one line list item with some descriptional text.

- #### List item two line

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item two line with overflow indicator

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line with overflow indicator

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item, disabled

  This is a list item with drilldown action and there is a status set to indicate something important.

- #### List item, current

  This is a list item with drilldown action and there is a status set to indicate something important.

    <div class="listNavigation">
        <div class="listNavigation__lists">
            <div class="listNavigation__header is-advanced">
                <a href="#" class="header__link">
                    Hierarchical list navigation
                </a>
                <a href="#" class="header__back">
                </a>
            </div>
            <ul class="listNavigation__list">
                <li class="list__item list__item--drilldown">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important, wrapping over more lines to show that the 'hit area' for the drilldown button on the right stretches over the whole row from top to bottom.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                        <a href="#" class="item__drilldown">
                        </a>
                    </a>
                </li>
                <li class="list__item list__item--drilldown">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt errorAlert filled has-color-error" aria-hidden="true"></span>
                        </div>
                    </a>
                    <a href="#" class="item__drilldown">
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--oneLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item one line</h4>
                            <div class="description">This is a one line list item with some descriptional text.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line with overflow indicator</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line with overflow indicator</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-disabled">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, disabled</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-current">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, current</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## Hierarchical list navigation, alternative color

Hierarchical list navigation

- #### List item A

  This is a list item with drilldown action and there is a status set to indicate something important, wrapping over more lines to show that the 'hit area' for the drilldown button on the right stretches over the whole row from top to bottom.

- #### List item B

  This is a list item with drilldown action and there is a status set to indicate something important.

- #### List item C

  This is a list item and there is a status set to indicate something important.

- #### List item one line

  This is a one line list item with some descriptional text.

- #### List item two line

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item two line with overflow indicator

  This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit.

- #### List item three line with overflow indicator

  This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.

- #### List item, disabled

  This is a list item with drilldown action and there is a status set to indicate something important.

- #### List item, current

  This is a list item with drilldown action and there is a status set to indicate something important.

    <div class="listNavigation listNavigation--alternateBgColor">
        <div class="listNavigation__lists">
            <div class="listNavigation__header is-advanced">
                <a href="#" class="header__link">
                    Hierarchical list navigation
                </a>
                <a href="#" class="header__back">
                </a>
            </div>
            <ul class="listNavigation__list">
                <li class="list__item list__item--drilldown">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important, wrapping over more lines to show that the 'hit area' for the drilldown button on the right stretches over the whole row from top to bottom.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                    <a href="#" class="item__drilldown">
                    </a>
                </li>
                <li class="list__item list__item--drilldown">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt errorAlert filled has-color-error" aria-hidden="true"></span>
                        </div>
                    </a>
                    <a href="#" class="item__drilldown">
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--oneLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item one line</h4>
                            <div class="description">This is a one line list item with some descriptional text.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--twoLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item two line with overflow indicator</h4>
                            <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
                <li class="list__item list__item--threeLine has-overflowIndicator">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item three line with overflow indicator</h4>
                            <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-disabled">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, disabled</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt exclamationDiamond filled has-color-warning" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link is-current">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item, current</h4>
                            <div class="description">This is a list item with drilldown action and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## Compact list navigation

Very simple List navigation

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item B

  This is a list item. There is a status set to indicate something important.

- #### List item C

  This is a list item. There is a status set to indicate something important.

- #### List item D

  This is a list item and there is a status set to indicate something important.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

    <div class="listNavigation listNavigation--compact">
        <div class="listNavigation__lists">
            <div class="listNavigation__header">
                Very simple List navigation
            </div>
            <ul class="listNavigation__list">
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item D</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## List navigation, basic example with status indicators

Very simple List navigation

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item B

  This is a list item. There is a status set to indicate something important.

- #### List item C

  This is a list item. There is a status set to indicate something important.

    <div class="listNavigation">
        <div class="listNavigation__lists">
            <div class="listNavigation__header">
                Very simple List navigation
            </div>
            <ul class="listNavigation__list">
                <li class="list__item is-error">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item is-warning">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item is-success">
                    <a href="#" class="item__link">
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

## List navigation, basic example with checkboxes

Very simple List navigation

- #### List item A

  This is a list item. There is a status set to indicate something important.

- #### List item B

  This is a list item. There is a status set to indicate something important.

- #### List item C

  This is a list item. There is a status set to indicate something important.

- #### List item D

  This is a list item and there is a status set to indicate something important.

- #### List item A

  This is a list item. There is no icon or status indicator set.

- #### List item A

  This is a list item. There is no icon or status indicator set.

    <div class="listNavigation">
        <div class="listNavigation__lists">
            <div class="listNavigation__header">
                Very simple List navigation
            </div>
            <ul class="listNavigation__list">
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation01" name="checkboxListNavigation01" value="checkboxListNavigation01" checked="checked" />
                            <label for="checkboxListNavigation01"></label>
                        </div>
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation02" name="checkboxListNavigation02" value="checkboxListNavigation02" checked="checked" />
                            <label for="checkboxListNavigation02"></label>
                        </div>
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item B</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                        <div class="item__metaInfo">
                            <span class="iconUxt arrowSingleRight" aria-hidden="true"></span>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation03" name="checkboxListNavigation03" value="checkboxListNavigation03" checked="checked" />
                            <label for="checkboxListNavigation03"></label>
                        </div>
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item C</h4>
                            <div class="description">This is a list item. There is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation04" name="checkboxListNavigation04" value="checkboxListNavigation04" checked="checked" />
                            <label for="checkboxListNavigation04"></label>
                        </div>
                        <div class="item__icon">
                            <span class="iconUxt person" aria-hidden="true"></span>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item D</h4>
                            <div class="description">This is a list item and there is a status set to indicate something important.</div>
                        </div>
                        <div class="item__metaInfo">
                            <button class="button button--ghost has-icon-only item__favorite"></button>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation05" name="checkboxListNavigation05" value="checkboxListNavigation05" checked="checked" />
                            <label for="checkboxListNavigation05"></label>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
                <li class="list__item">
                    <a href="#" class="item__link">
                        <div class="checkboxWrapper">
                            <input type="checkbox" class="inputGroup__checkbox" id="checkboxListNavigation06" name="checkboxListNavigation06" value="checkboxListNavigation06" checked="checked" />
                            <label for="checkboxListNavigation06"></label>
                        </div>
                        <div class="item__content">
                            <h4 class="label">List item A</h4>
                            <div class="description">This is a list item. There is no icon or status indicator set.</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

#### Usage

Element | Class | Description
--- | --- | ---
`.listNavigation` | `.listNavigation--alternateBgColor` | Colors the complete list navigation with a white background instead of grey, all child elements are colored white where appropriate, too.
`.listNavigation` | `.listNavigation--compact` | Compact variant of the list navigation.
`.list__item` | `.is-info`, `.is-warning`, `.is-error`, `.is-success` | Adds different states to the list item.
`.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 two line tall. 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.
`.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 Development License Agreement.
Back to top