| Table of Contents | ||||
|---|---|---|---|---|
|
...
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 | Comment |
|---|---|---|---|
Regular |  |  |
|
Hover |  |  |
|
Active |  |  |
|
Selected |  |  |
|
Focused |  |  |
|
Focused, Hover |  |  |
|
Focused, Active |  |  |
|
Focused, Selected |  |  |
|
...
Only one item at a time can be selected from each level.
When a 1st level item is selected, the 2nd level items should be updated appropriately.
Menu items should be shown 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 within top navigation.
Interactions
ADD IMAGES
On selecting an item from the menu, the user will be redirected to the relevant page.
The current selection is shown for 1st and 2nd level navigation at all times, using a blue line underneath the item(s).
Selecting a 1st level item will also automatically select the first 2nd level item, if one exists.
On hover, a lighter blue underline will be shown underneath the hovered item.
...
the suite name and the 2nd level of navigation will be hidden.
the user profile image will reduce in size.
States
...
Show hover state (expanded but still with the expand icon)
State | Image |
|---|---|
Expanded |   |
Collapsed |  |
Collapsed On Hover |  |
Default state
On first opening, 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.
<Update image with visual>
...
...
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. |
Tab index order for responsive layout
...
Within the navigation menu <TBD and review this part again - especially should behavior change from regular top navigation>
Keyboard | Trigger area | Menu |
|---|---|---|
Tab | Navigates to the next component. | N/A |
Shift + Tab | Navigates to the previous component. | N/A |
Space |
|
|
Enter | Opens the menu. |
|
Esc | Closes the menu without updating the selection. | |
Arrows |
Otherwise N/A. |
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>