...

• 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

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.

When unpinned:	When pinned:
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).	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.
Image Modified	Image Modified

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.

Update image (remove notifications circle)

...

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

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.

Correct ‘Average’ in the image

...

Content

Can be either text or icons.

...

The tab index flow will follow this order. Shift + Tab will follow the reverse order.

<Update image visuals>

...

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:

1. Application selector

2. Left navigation

3. Instances (if exist)

Responsive Design

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.

...

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

Design

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>