Structure
Top navigation
Top navigation can have 1 or 2 levels.
Each level can include up to 7 items each.
1st level item labels may be wrap onto 2 lines.
2nd level item labels may only be presented in a single line.
A grey line separates 1st and 2nd level navigation.
A blue line is shown underneath the selected item(s).
Placement and positioning
Top navigation is shown in the header bar, at the top of the screen.
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
Top navigation
Only one item can be selected from each level at a time.
When a top level item is selected, the 2nd level items should be updated appropriately.
Menu items should be in a logical order, with the most commonly used first.
The width of each item should be responsive to the item label, up to a maximum of x characters.
No horizontal scroll can be used for top navigation.
2nd level navigation should only be shown where relevant. Otherwise the area beneath the line will remain empty.
Interactions
Top navigation
ADD IMAGES
The current selection is shown for the 1st and 2nd level navigation at all times, using a blue line underneath the item.
On selecting another item, if there are no sub-levels, the user will be redirected to the new page.
Selecting an item from the 1st level will only open the 2nd level menu, where one exists, without redirecting to a new page. Only after selecting a 2nd-level item will the user be redirected to a new page.