| Table of Contents | maxLevel | 2|||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Table of Contents | ||||||||||
|
Description
Navigation allows users to move between pages in the selected application.
...
when there are 3 or more levels in the menu hierarchy.
when there are more than 7 8 menu items at any level.
when the top bar area is needed to show instances or additional information. See Additional options for Left Navigation below.
...
Note: Left navigation cannot be used in conjunction with the Filter Pane.
Types
By default, labels for left navigation items are shown with a text label. Icons can optionally be added to each item where needed.ADD WHOLE-PAGE IMAGE showing the nav frame
Default | With Icons |
|---|---|
.png?version=1&modificationDate=1675874615715&cacheVersion=1&api=v2) |  |
Structure
Left navigation consists of:
...
A left-hand grey column.
A blue marker in the location of the top level of the selected item.
...
Default | With icons |
|---|---|
.png?version=1&modificationDate=1675876822904&cacheVersion=1&api=v2&width=34){kind=small} |  |
Placement and positioning
...
stick to the left side of the page, beside the main workspace.
be collapsible.
be the same fixed width as the Product area (Verint logo and suite name).
fill the vertical space, from beneath the VerinTop to the bottom of the page.
States
Default
State | 1st |
Additional level navigation
Regular
Hover
Active
Selected
Selected, Hover
Focused
Focused, Hover
Focused, Selected
Level | 2nd Level | 3rd Level | |
Regular |  |  |  |
Hover |  |  |  |
Active |  |  |  |
Selected |  |  |  |
Selected, Hover |  |  |  |
Focused |  |  |  |
Focused, Hover |  |  |  |
Focused, Selected |  |  |  |
With icons
State | 1st Level | 2nd Level | 3rd Level |
Regular | .png?version=1&modificationDate=1675939911672&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942610222&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942965535&cacheVersion=1&api=v2) |
Hover |  | .png?version=1&modificationDate=1675942614749&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942979978&cacheVersion=1&api=v2) |
Active |  | .png?version=1&modificationDate=1675942619955&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942991024&cacheVersion=1&api=v2) |
Selected | .png?version=1&modificationDate=1675940208615&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942630131&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942997829&cacheVersion=1&api=v2) |
Selected, Hover |  | .png?version=1&modificationDate=1675942634102&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675943001794&cacheVersion=1&api=v2) |
Focused | .png?version=1&modificationDate=1675940229421&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675942638967&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675943008333&cacheVersion=1&api=v2) |
Focused, Hover |  | .png?version=1&modificationDate=1675942643377&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675943013326&cacheVersion=1&api=v2) |
Focused, Selected | .png?version=1&modificationDate=1675940247961&cacheVersion=1&api=v2) | .png?version=2&modificationDate=1675944322880&cacheVersion=1&api=v2) | .png?version=1&modificationDate=1675943016683&cacheVersion=1&api=v2) |
Default state
By default the first item will be selected, unless otherwise configured by the user.
...
change the left navigation state from pinned to unpinned state, or vice versa.
change the icon button from an expand arrow to a collapse arrow, or vice versa.
State |
|---|
Default | With Icons | Description |
|---|---|---|
Unpinned | .png?version=1&modificationDate=1675877321465&cacheVersion=1&api=v2&width=34){kind=small} |
 |
The left navigation panel will:
|
|
| |
Pinned | .png?version=1&modificationDate=1675877394631&cacheVersion=1&api=v2&width=34){kind=small} |
 |
|
|
|
Transitions
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 narrow or stretch 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.
New image with lots of instances (showing < > scrolling)
...
Note: instances must always be visible if the header is collapsed. Collapsing is not mandatory when using instances.
...
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 respectively.
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 |
Regular |
 | |
Hover |  |
Active |  |
Selected |  |
Selected, Hover |  |
Focused |  |
Focused, Hover |  |
Focused, Selected |  |
Interaction
Clicking on an instance will change the main workspace view to that instance.
On hover, an X will appear, allowing the user to close the instance. A confirmation dialog may be shown.
...
Additional information can optionally be shown in the header bar, above the divider line.
New image with additional information. Can be the same as one above?
...
Content
Can be either text or icons.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
The tab index flow will follow this order. Shift + Tab will follow the reverse order.
<Update image visuals>
...
Image from top nav page:
...
Tab order may vary slightly due to missing or additional components. The main flow is according to navigation level.
Tab order may change due to missing or added components. The main flow is according to navigation level:
...
Application selector
...
The left menu pane navigation will follow the Tree focus management.
Keyboard | Navigation | Instances (if exist) |
|---|
...
Keyboard
Description
Tab | Navigates to the next component according to the |
order shown above. From the last component will navigate to the next focusable element on the page. | N/A |
Shift + Tab | Navigates to the previous component according to |
the order shown above. From the first component will navigate to the last focusable element on the page. | N/A | |
Space | Depending on component. | On instance - selects the instance On X - removes the instance |
Enter | Depending on component. |
For left pane navigation see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance
On instance - selects the instance On X - removes the instance | |
Esc | Depending on component. |
Arrows
For left pane navigation see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance
For Instances (if exist):
Left/Right - navigates between instances accordinglyN/A | ||
Arrows | Depending on component. | Right/Left move the focus accordingly: Right:
Left
|
Home | Sets focus on the first element in VerinTop. | Set focus on the first instance |
End | Sets focus on the last element in VerinTop. | Set focus on the last instance |
Delete |
For Instances only - will delete the selected instance
Responsive Design
N/A | On instance or X - removes the instance. After an instance is removed:
|
Responsive Design
Verint products should support all devices down to the common tablet size (960px width).
For details on VerinTop responsive design, see the main VerinTop page.
For general responsive design guidelines, see Fundamentals - Responsive design.
Additional information
When the screen width is reduced and Additional Information no longer fits onto one line, it should be truncated. This may be achieved by hiding inactive icons and/or truncating text, with the full information shown on click or hover.
Design
Zeplin link | Screen thumbnail |
|---|---|
.png?version=1&modificationDate=1690302671894&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1691505846998&cacheVersion=1&api=v2) | |
 | |
.png?version=1&modificationDate=1691511935698&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1691506137230&cacheVersion=1&api=v2) | |
 | |
.png?version=1&modificationDate=1691506271607&cacheVersion=1&api=v2) | |
 | |
...
Example at 961 px:
...
For more details on responsive design, see the main VerinTop page.
Design
Zeplin link
Screen thumbnail
<<Short Zeplin link. You
Use this >>
%20-%20Pinned%20(Regular).png?version=1&modificationDate=1691506371037&cacheVersion=1&api=v2) | |
.png?version=2&modificationDate=1690379389766&cacheVersion=1&api=v2) | |
%20-%20Expanded%20(Regular).png?version=1&modificationDate=1691506573330&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1690303111765&cacheVersion=1&api=v2) | |
%20-%20Unpinned%20(Regular).png?version=1&modificationDate=1691506656142&cacheVersion=1&api=v2) | |
.png?version=1&modificationDate=1690379405584&cacheVersion=1&api=v2) | |
 |
Code
...