| 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.
...
Menu items will expand and collapse with a brief slide effect.
The left navigation panel will open and close with a brief slide effect.
When pinning or unpinning the left navigation, the content on the main area of the page will collapse or expand with a transition effect.
Additional options for Left Navigation
These additional header bar features may only be used in left navigation mode.
...
Instances represent pages for different tasks or items of work.
...
Note: the header bar cannot collapse instances must always be visible if the header is collapsed. Collapsing is not mandatory when using instances.
Structure
A one-line row of instances.A blue border around the selected instance.
Placement and positioning
...
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.
If the selected instance is not in view when the user returns to the main workspace, it should automatically be brought back into view.
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…
Correct Average in the image
...
Content
Can be either text or icons.
...
A one-line row.
It may be divided by vertical lines according to separate the displayed information.
...
Positioned on the top row, right-aligned next to the User Profile and Resource Center.
Interaction
Additional information is a should be read-only section.
Tooltips may be used. Recommended for icons.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive Design
For details on responsive design, see the main VerinTop page.
Design
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>>