Table of Contents

minLevel	1
maxLevel	2
outline	false
type	list
printable	false

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.

...

By default, labels for left navigation items are shown with a text label. Icons can optionally be added to each item where needed.

Default	With Icons
Image Modified	Image Modified

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
Image Modified	Image Modified

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 Level	2nd Level	3rd Level
Regular	Image Modified	Image Modified	Image Modified
Hover	Image Modified	Image Modified	Image Modified
Active	Image Modified

Image Removed

Image Added	Image Modified
Selected	Image Modified	Image Modified	Image Modified
Selected, Hover	Image Modified	Image Modified	Image Modified
Focused	Image Modified	Image Modified	Image Modified
Focused, Hover	Image Modified	Image Modified	Image Modified
Focused, Selected	Image Modified	Image Modified	Image Modified

With icons

State	1st Level	2nd Level	3rd Level
Regular	Image Modified	Image Modified	Image Modified
Hover

Image Removed

Image Added	Image Modified	Image Modified
Active

Image Removed

Image Added	Image Modified	Image Modified
Selected	Image Modified	Image Modified	Image Modified
Selected, Hover

Image Removed

Image Added	Image Modified	Image Modified
Focused	Image Modified	Image Modified	Image Modified
Focused, Hover

Image Removed

Image Added	Image Modified	Image Modified
Focused, Selected	Image Modified	Image Modified	Image Modified

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	Image Modified	Image Modified

the

The left navigation panel will:

open when the user hovers over or clicks on the left-hand edge of the screen.

the left navigation panel will

overlay the content of the page, hiding everything that is behind it.

the left navigation will

close when: a menu item is selected, or the user moves the cursor away (removes hover).
Pinned	Image Modified	Image Modified

the

The left navigation panel will always be visible.

the

The content of the page narrows to be shown next to the navigation menu (so nothing is hidden).

selecting

Selecting an item from the menu will not close the left navigation panel.

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.

...

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

Comment

Regular

Image Added
Hover	Image Added
Active	Image Added
Selected	Image Added
Selected, Hover	Image Added
Focused	Image Added
Focused, Hover	Image Added
Focused, Selected	Image Added

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.

...

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

Instances


Tab	Navigates to the next component according to the

Tab Index Order

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

Tab Index Order

the order shown above.

From the first component will navigate to the last focusable element on the page.

N/A

Space

Depending on component.

Selects the InstanceSelects the Instance

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
For Instances (if exist), will display the selected instance

On instance - selects the instance

On X - removes the instance

Esc

Depending on component.

If focus is on “x” set focus on the Instance. Otherwise Right

N/A

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 accordingly.

Depending on component.

Right/Left move the focus accordingly:

Right:

If focus is on

On instance - moves the focus to the instance’s close button

of the instanceIf focus is on

.
On close button - moves the focus to the next instance to the right.
Stops at the close button of the last instance.

Left

If focus is on

On instance - moves the focus to the close button of the previous instance.

If focus is on

On close button - moves the focus to

the

its instance. Stops at the first instance.
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

When focus is on an instance will close the instance.

Responsive Design

N/A

On instance or X - removes the instance.

After an instance is removed:

the focus moves to the next instance, where one exists.
if there is no following instance, the focus moves to the previous instance.
if there are no more instances, the focus moves to the next component.

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.

Example at 961 px:

...

For more details on responsive design, see the main VerinTop page.

Design

Zeplin link	Screen thumbnail
https://zpl.io/g8KLo9D	Image Modified

Image Removed


https://zpl.io/Q0eGLkn	Image Added
https://zpl.io/W4AQ6ZP	Image Added
https://zpl.io/noMZPYl	Image Added
https://zpl.io/5EnNQ5r	Image Added
https://zpl.io/40D4yvX	Image Added
https://zpl.io/ykL1KjJ	Image Added
https://zpl.io/8lxmAP6	Image Added
https://zpl.io/GExn84j	Image Added
https://zpl.io/W4w9r1e	Image Added
https://zpl.io/1yoMRr4	Image Added
https://zpl.io/vMrzLNj	Image Added
https://zpl.io/RMym6jN	Image Added
https://zpl.io/ykYQXBK	Image Added
https://zpl.io/dxBRd77	Image Added