...

• 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

...

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 whole navigation within each 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.

...

• 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

...

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.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

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 or truncating text, with the full information shown on click or hover.

...

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

...

Code

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