Table of Contents | ||
---|---|---|
|
...
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 |
|
|
...
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.
...
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.
Correct Average in the image
...
Content
Can be either text or icons.
...
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>>