Description

Navigation allows users to move between pages in the selected application.

Left navigation mode should be used:

when there are 3 or more levels in the menu hierarchy.
when there are more than 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.

Default	With Icons

Structure

Left navigation consists of:

Menu items, including:
- Item labels, which are presented on one line only.
- Expand and collapse icons, to show where there are more levels in the menu hierarchy.
- Sub-level menu items, which will be indented to the right. There may be up to 5 levels in the menu hierarchy.
A grey line to separate 1st level items.
A blue marker 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.

When left navigation is in a collapsed state, it will simply consist of:

A left-hand grey column.
A blue marker in the location of the top level of the selected item.

Default	With icons

Placement and positioning

Left navigation pane should:

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
Hover
Active
Selected
Selected, Hover
Focused
Focused, Hover
Focused, Selected

With icons

State	1st Level	2nd Level	3rd Level
Regular
Hover
Active
Selected
Selected, Hover
Focused
Focused, Hover
Focused, Selected

Default state

By default the first item will be selected, unless otherwise configured by the user.

Where there is more than one 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.

Only one item at a time can be selected from each level.
On selecting a new 1st level item, the previously-open section closes automatically.
Everything can be collapsed at the same time (unlike an accordion).
Parent items may:
- link to a separate page, or
- operate only as a container for the sub-levels.
The behaviour of parent items must be the same across the entire navigation within a product.
Scroll should only operate within the open 1st level item and its sub-levels, when there are more than 3 items shown.
There is no horizontal scroll.
Truncation should be avoided, where possible, by using short labels. Where the label is longer than the menu width and must be truncated, the full label should be shown in a tooltip on hover.

Interaction

Selecting navigation items

Any part of an item can be clicked to select it.
On selecting an item from the left navigation menu:
- if the item has no sub-levels, the user will be redirected to the relevant page.
- if the item is only a container for sub-items, it will be expanded to show the next level in the hierarchy.
- if the item has sub-levels but also links to a separate page, the user will be redirected to the relevant page and the item will be expanded to show the next level in the hierarchy.
Clicking on an expand and collapse icon next to an item will only open or close the hierarchy, without redirecting the user to another page.
Only one item at each level can be expanded at any one time.
The current selection (at any level) is marked with a grey background and a blue marker on the left.
If a 2nd or 3rd level item is selected, when collapsed the 1st level item will be marked instead.

Pinning behaviour

Clicking the expand or collapse icon will:

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

The left navigation panel will:

open when the user hovers over or clicks on the left-hand edge of the screen.
overlay the content of the page, hiding everything that is behind it.
close when:
- a menu item is selected, or
- the user moves the cursor away (removes hover).

Pinned

The left navigation panel will always be visible.
The content of the page narrows to be shown next to the navigation menu (so nothing is hidden).
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.

Instances

Description

Instances represent pages for different tasks or items of work.

Verint LUX Design System > Left Navigation Mode > EM verintop.png

Note: instances must always be visible if the header is collapsed. Collapsing is not mandatory when using instances.

Structure

A one-line row of instances.

Placement and positioning

Positioned on the bottom row, left-aligned next to the Application Selector.

Internal logic

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

Description

Additional information can optionally be shown in the header bar, above the divider line.

Content

Can be either text or icons.

Structure

A one-line row.
Vertical lines may be used to separate the information.

Placement and positioning

Positioned on the top row.

Interaction

Additional information should be read-only.
Tooltips may be used to provide more details. Recommended for icons.

Accessibility Compliance

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.

Tab order may vary slightly due to missing or additional components. The main flow is according to navigation level.

The left menu pane navigation will follow the Tree focus management.

Keyboard	Navigation	Instances (if exist)
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.	On instance - selects the instance On X - removes the instance
Esc	Depending on component.	N/A
Arrows	Depending on component.	Right/Left move the focus accordingly: Right: On instance - moves the focus to the instance’s close button. On close button - moves the focus to the next instance to the right. Stops at the close button of the last instance. Left On instance - moves the focus to the close button of the previous instance. On close button - moves the focus to 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	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.

Design

Zeplin link	Screen thumbnail
https://zpl.io/g8KLo9D
https://zpl.io/Q0eGLkn
https://zpl.io/W4AQ6ZP
https://zpl.io/noMZPYl
https://zpl.io/5EnNQ5r
https://zpl.io/40D4yvX
https://zpl.io/ykL1KjJ
https://zpl.io/8lxmAP6
https://zpl.io/GExn84j
https://zpl.io/W4w9r1e
https://zpl.io/1yoMRr4
https://zpl.io/vMrzLNj
https://zpl.io/RMym6jN
https://zpl.io/ykYQXBK
https://zpl.io/dxBRd77

Code

Verint LUX Design System > Left Navigation Mode > Soon_Progress_line_det_ani.gif