Anatomy
The Nav List is a container that consists of vertically stacked list items, which each have a certain state (see States). The container is visually separated from the content on the page with a right border.
The Nav List is collapsable - the button control operates this action. It enables the user to hide it from view and bring it back again when needed.
|
# |
Element name |
Element type |
|---|---|---|
|
1 |
Back link |
Link |
|
2 |
List items |
List item |
|
3 |
Collapse/Expand button |
Button |
States
Every list item has its own state. In general it comes down to a default state, hover, active and selected. The style of hover and active depends if the list item is selected or not. When it is selected, the background already contains a darker shade - in which case the hover and active will be darker compared to unselected item. For the sake of documentation we do not take this into account in the example below.
Types
Currently, we make a distinction between two different types for the Nav List: a ‘basic’ type and a ‘table of content’ type. The latter is used for our Information UBC and has a slightly different behaviour. It is connected to the content categories and content anchors on the page. Therefore, is also serves as ‘in page navigation’. This also leads to slightly other styling for selected items.
|
# |
Type |
|---|---|
|
1 |
Basic |
|
2 |
Table of contents |