Description
Navigation allows users to move between pages in the selected application.
Left navigation should be used:
When there are more than 7 menu items at any level.
When there are 3 levels in the menu hierarchy.
Otherwise, use Top Navigation.
Structure
?
Left navigation can have up to 3 levels.
Item labels can only be shown on one line.
Expand and Collapse icons indicate more levels in the menu hierarchy.
Each sub-level in the hierarchy is indented to the right.
Placement and positioning
Left navigation is shown in a left-hand panel, which can be collapsed.
The panel has a fixed width of x.
Note: Left navigation cannot be used in conjunction with the Filter Pane.
States
State | Top navigation | Left navigation | Comment |
|---|---|---|---|
Regular |
|
| |
Hover |
|
| |
Active |
|
| |
Selected |
|
| |
Selected, Hover |
|
| |
Disabled |
|
| |
Read Only |
|
| |
Error |
|
| |
Warning |
|
| |
Focused |
|
| |
Focused, Hover |
|
| |
Focused, Selected |
|
|
Default state
By default, the first item will be selected, unless otherwise configured by the user. Where there is more than 1 level, the first item of each level will be selected.
Internal logic
Left navigational operates as an Accordion:
Only one item for each level can be expanded at a time.
Scroll should operation within the last level only.
Interactions
The left navigation can be expanded and collapsed, include hover and pin states (these aren't included in the drawings).
Only one item for each level can be expanded at a time.
The current selection is marked with a blue marker on the left (in either hierarchy level).
If a 2nd or 3rd level item is selected, when collapsed the top level item will be marked.
On selecting another item, the user will be redirected to the new page.
For items with sub-levels, selecting the item will only open the next level, without redirecting to a new page. Only after selecting an item from the next level will the user be redirected to a new page.