Description
Navigation allows users to move between pages in the selected application.
Top navigation should be used:
By default, if the menu options fit.
When there are 7 or fewer menu items at each level.
When there are only 2 levels in the menu hierarchy.
...
Top navigation is shown in the header bar, at the top of the page.
It always extends across the full width of the page.
States
State | Top First level navigation | Left Second level navigation | Comment | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Regular |
|
| |||||||||||||
Hover |
|
| |||||||||||||
Active |
|
| |||||||||||||
Selected |
|
| |||||||||||||
Selected, Hover |
|
| Disabled |
|
| Read Only |
|
| Error |
|
| Warning |
|
| |
Focused |
|
| |||||||||||||
Focused, Hover |
|
| |||||||||||||
Focused, Selected |
|
|
...
Only one item at a time can be selected from each level.
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. Item widths may be greater where there are fewer than 7 items in a level.
Truncation should be avoided, where possible, by using short labels.
2nd level navigation should only be shown where relevant. Otherwise the area beneath the line will remain empty.
No horizontal scroll can be used for top navigation.
Interactions
ADD IMAGES
The current selection is shown for 1st and 2nd level navigation at all times, using a blue line underneath the item(s).
On selecting another item, if there are no sub-levelsan item from the menu, the user will immediately be redirected to the new relevant 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 pagea top level item will also automatically select the first sub-item, if a 2nd level exists.
On hover, a lighter blue underline will be shown underneath the hovered item.