Table of Contents | ||
---|---|---|
|
...
Left navigation consists of:
Up to 5 levels in the menu hierarchy.
Menu items, including:
Item labels, which can only be presented on one line.
Expand and collapse icons, to show where there are more levels in the menu hierarchy.
Each sub-level in the hierarchy will be indented to the right.
A grey line to separate 1st level items.
A blue marker is shown to the left of the selected item.
An expand or collapse icon in the top-right corner, allowing the user to switch between pinned and unpinned states.
A scroll bar for the open section of the menu.
...
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 will be the same width as the Product area (Verint logo and suite name).
States
State | 1st level navigation | Additional level navigation | Comment |
Regular |
|
| |
Hover |
|
| |
Active |
|
| |
Selected |
|
| |
Selected, Hover |
|
| |
Focused |
|
| |
Focused, Hover |
|
| |
Focused, Selected |
|
|
...
Where there is more than 1 level, and the 1st level item does not link to a separate page, the first item at each sub-level will be selected.
By default, the left navigation panel is pinned open.
Internal logic
Left navigational operates similarly to an Accordion.
...
When the instances exceed the horizontal space, next and back buttons will appear to the right of the instances, allowing the user to scroll.
Clicking the left/right arrow will scroll to show the previous/next instance.
The selected instance will not change.
When reaching the first or last instance, the relevant left or right arrow will be disabled.
States
State | Image | Comment |
Regular | ||
Hover | ||
Selected | ||
Selected, Hover | ||
Focused | ||
Focused, Hover | ||
Focused, Selected |
...
Additional information can optionally be shown in the header bar, above the divider line. This can include details such as…
...
Content
Can be either text or icons.
...
A one-line row.
It may be divided by vertical lines according to the displayed information.
Placement and positioning
...