- style
Top Navigation Mode
- Carlie Bradshaw
- Gadi Freedman (Unlicensed)
- Asaf Ben-Oved
- Guy Hivroni (Unlicensed)
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 only 1 or 2 levels in the menu hierarchy.
when there are 8 or fewer menu items at each level.
Otherwise, use Left Navigation Mode.
Structure
Top navigation can have 1 or 2 levels.
Each level can include up to 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).
Placement and positioning
Top navigation is shown in the header bar, at the top of the page.
It always extends across the full width of the page.
Default state
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 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.
Interactions
Where there is only 1 level of navigation, selecting an item will immediately load the page.
Where there are 2 levels of navigation:
when a 1st level item is selected,
the available 2nd level items will be shown.
the loaded page will not change.
when a 2nd level item is selected, the relevant page will load.
if a 1st level item is selected but no 2nd level item is subsequently chosen, both levels of navigation will return to the currently-selected page after hovering away from the VerinTop for >1s.
Expand-Collapse behavior
Description
The header bar can be collapsed by the user to allow for more vertical space.
When collapsed, the 2nd level navigation options are shown only on hover.
Note: This applies only to top navigation. The header bar will not collapse when using left navigation.
Structure
When collapsed:
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.
Interactions
When the header bar is expanded:
on hover, a collapse icon button will appear below the product area.
Clicking the collapse icon button will collapse the header bar.
When the header bar is collapsed:
On hover:
the expanded top will be shown automatically, revealing the 2nd level navigation and suite name. An expand icon button will appear below the product area.On removing hover the top will collapse again automatically.
Clicking the expand icon button will pin the header bar open.
Transitions
The header bar should expand/collapse with a transition effect.
No item selected
By default, the primary 1st level and 2nd level menu items should be selected when landing. However, in some instances there may be limitations which require a ‘No item selected’ state. In this case:
no blue selection lines or second level navigation are shown in the Verintop menu.
an animated graphic will be shown in the main workspace, explaining that the user must select a menu item.
On narrower screens, the message ‘Select a destination’ will be shown instead of the selected menu item, using a hint text colour.
See the Responsive Design section below for more information.
Best Practices
General
Truncation should be avoided, where possible, by using short labels.
Number of items for both 1st and 2nd levels should not exceed 8 items.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Tab Index order
The tab index flow will follow this order. Shift + Tab will follow the reverse order.
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
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
As the screen width changes, the VerinTop should respond based on the number and length of menu items in both 1st and 2nd level navigation.
The space between menu items should not be adjusted at any width.
Each menu item will have the same padding either side of the label. The selection highlight should extend across this padding.
1st and 2nd level menu items will have an additional consistent spacing between them.
Wide screens
Where the screen size is wide enough to comfortably show everything contained within the VerinTop:
All content should be shown on one line, without wrapping. This includes:
1st level menu items, and
the application selector. This area may be expanded if the application name is long, and normally wraps onto 2 lines.
Elements aligned to the left- and right-hand sides (Product Area and User Profile) will remain there.
Narrow screens
Where 2nd level navigation does not fit within the screen width a More… option should be added on the right-hand side.
Clicking More… will open a drop-down menu containing the remaining menu items.
The same hover and selected states from the main menu should be used for menu items in the drop-down.
When an item has been selected from the drop-down, the blue underline should be added to the More… button.
Where 1st level navigation does not fit within the screen width, even after line wrapping:
The entire menu should be replaced by a menu icon button ⋮.
When the icon button is clicked, a drop-down menu will open.
1st level menu items will be shown on the left.
When a 1st level menu item is hovered over or clicked, the related 2nd level menu items will be shown on the right.
When a 2nd level menu item is selected:
the menu will close.
the new page will be shown in the workspace.
The current selection should be shown at both levels with a blue check mark.
When the menu is first opened, the currently-selected 1st level and 2nd level menu items should be shown by default.
A hover state should be shown for all menu items on hover (unless using a touch device).
Where possible, the selected menu item will be shown next to the menu icon button in the header bar. This should include both 1st and 2nd levels, separated by a >.
Where no menu item is currently selected, the message ‘Select a destination’ will be shown instead. See No item selected for more information.
Current selection | Hover |
|---|---|
For more information about responsive design for mobile, please contact the UX team.
Design
Code