...
by default, if the menu options fit.
when there are only 1 or 2 levels in the menu hierarchy.
when there are 7 8 or fewer menu items at each level.
...
Top navigation can have 1 or 2 levels.
Each level can include up to 7 8 items.
1st level item labels:
may wrap onto 2 lines.
can be up to 30 characters each.
2nd level item labels:
can only be presented on one line.
can be up to 16 characters each.
A grey line separates 1st and 2nd level navigation.
A blue line is shown underneath the selected item(s).
...
By default, the first item will be selected, unless otherwise configured by the user. Where there is more than one level, the first item at each level will be selected.
States
State | 1st level navigation | 2nd level navigation |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Selected |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Selected |  |  |
Internal logic
Only one item at a time can be selected from each level.
2nd level navigation should only be shown where relevant. Otherwise, the area beneath the line will remain empty.
Where there are 2 levels of navigation, only 2nd level items will load pages within the application. 1st level items only allow access to 2nd level items.
Menu items should be shown in a logical order, with the most commonly used first.
Menu item widths may be greater where there are fewer than 7 8 items in a level. The width of each item should be responsive to the item label, with the following limits:
1st level item labels: up to 30 characters (across 2 lines).
2nd level item labels: up to 16 characters (1 line only).
No horizontal scroll can be used within top navigation.
...
the suite name and the 2nd level of navigation will be hidden.
the user profile image will reduce in size.
States
State | Image |
|---|---|
Expanded |  |
Collapsed |  |
Collapsed On Hover |  |
Default state
On first opening the application, the top should be expanded.
...
Tab order may vary slightly due to missing or additional components. The main flow is left to right by navigation level.
...
Keyboard | Description |
|---|---|
Tab | Navigates to the next component according to the Tab Index Order. From the last component will navigate to the next focusable element on the page. |
Shift + Tab | Navigates to the previous component according to the Tab Index Order. From the first component will navigate to the last focusable element on the page |
Space | Depending on component. |
Enter | Depending on component.
|
Esc | Depending on component. |
Arrows | Within top navigation at 1st and 2nd levels:
Otherwise N/A. |
Home | Sets focus on the first element in VerinTop. |
End | Sets focus on the last element in VerinTop. |
Within the navigation menu
Keyboard | Trigger area | Menu |
|---|---|---|
Tab | Navigates to the next component. | N/A |
Shift + Tab | Navigates to the previous component. | N/A |
Space | Opens the menu and moves focus to the 1st item |
|
Enter | Opens the menu. |
|
Esc | N/A | Closes the menu without updating the selection. Returns focus to the Trigger area. |
Arrows | N/A | Unless otherwise specified are N/A
|
Responsive Design
For details on responsive design, see the main VerinTop page.
Design
Code
...