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