Nav list component

A nav list is a list of links allowing users to quickly navigate and select an item.

Structure

A nav list displays a set of links vertically.

Items of the list can be text + icon or only text.

To divide the list into sections, headlines can be used.

Be aware: If a headline is used for one section, all the remaining sections should have headlines as well.

Good example

List - good

Each section has a headline

Bad example

List - Bad

Only the first section has a headline

Behavior

Display list

By default, list items are sorted alphabetically. 

If no list items are available, the following message should be displayed: “No items to show”.

Select an item

When users select an item, the background color changes to a darker grey. It allows users to know which item is selected.