Description
Navigation allows users to move between pages in the selected application.
Left navigation should be used:
When there are more than 7 menu items at any level.
When there are 3 levels in the menu hierarchy.
Otherwise, use Top Navigation.
Structure
Left navigation can have up to 3 levels.
Item labels can only be presented on one line.
Expand and Collapse icons indicate more levels in the menu hierarchy.
Each sub-level in the hierarchy will be indented to the right.
A grey line separates top level items.
A blue marker is shown to the left of the selected item.
Placement and positioning
Left navigation is shown in a left-hand panel, which can be collapsed.
It will always extend across the full height of the page, beneath the header bar.
The panel has a fixed width of x /
The panel will be the same width as the Product area (Verint logo and suite name).
Note: Left navigation cannot be used in conjunction with the Filter Pane.
States
State | 1st level navigation | 2nd and 3rd level navigation | Comment |
|---|---|---|---|
Regular |
|
| |
Hover |
|
| |
Active |
|
| |
Selected |
|
| |
Selected, Hover |
|
| |
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 at each level will be selected.
Internal logic
Left navigational operates as an Accordion:
Only one item at a time can be selected from each level.
Scroll should operate within the last level only /
A scroll bar will be used when the navigation is taller than the height of the screen.On selecting a new section, the previously-open section should close automatically.
Truncation should be avoided, where possible, by using short labels. Where the label is longer than the menu width, the full label should be shown in a tooltip on hover.
Interactions
On selecting an item from the menu, the user will be redirected to the relevant page.
For items with sub-levels, selecting the item will only open the next level, without redirecting to a new page. Only after selecting an item from the next level will the user be redirected to a new page.
Any part of an item can be selected to open or select it.
The left navigation can be expanded and collapsed, include hover and pin states.
Only one item for each level can be expanded at a time.
The current selection (at any level) is marked with a blue marker on the left.
If a 2nd or 3rd level item is selected, when collapsed the top level item will be marked instead.