Description
...
Otherwise, use Top Navigation.
Structure
...
Left navigation can have up to 3 levels.
Item labels can only be shown presented on one line.
Expand and Collapse icons indicate more levels in the menu hierarchy.
Each sub-level in the hierarchy is 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 | Top 1st level navigation | Left 2nd and 3rd level navigation | Comment | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
Regular |
|
| ||||||||
Hover |
|
| ||||||||
Active |
|
| ||||||||
Selected |
|
| ||||||||
Selected, Hover |
| Disabled |
|
| Read Only |
| ||||
| Error |
|
| Warning |
|
| Focused |
|
| |
Focused, Hover |
|
| ||||||||
Focused, Selected |
|
|
...
By default, the first item will be selected, unless otherwise configured by the user. Where there is more than 1 level, the first item of at each level will be selected.
...
Left navigational operates as an Accordion:
The left navigation can be expanded and collapsed, include hover and pin states (these aren't included in the drawings).
Only one item for each level can be expanded at a time.
The current selection is marked with a blue marker on the left (in any hierarchy level).
If a 2nd or 3rd level item is selected, when collapsed the top level item will be marked.
- On selecting a different item
Only one item for each level can be expanded at a time can be selected from each level.
Scroll should operate within the last level only .
Interactions
/
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 new 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.