Description

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

...

Left navigation consists of:

• Up to 5 levels in the menu hierarchy.

• Menu items, including:

  • Item labels, which can only be presented on one line.

  • Expand and collapse icons, to show where there are more levels in the menu hierarchy.

  • Each sub-level in the hierarchy will be indented to the right.

• A grey line to separate 1st level items.

• A blue marker is 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.

...

• 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

...

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

...

Interaction

Selecting navigation items

...

When unpinned:	When pinned:
the left navigation panel will open when the user hovers over or clicks 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 from the left navigation	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 RemovedImage Added	Image RemovedImage Added

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 collapse or expand with a transition effect.

...

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

States

Interaction

• Clicking on an instance will change the main workspace view to that instance.

• On hover, an X will appear, allowing you to close the instance. A confirmation dialog may be shown.

Additional information

Description

...

Positioned on the top row, right-aligned next to the User Profile and Resource Center.

Interaction

• Additional information a read-only section

• Tooltips may be used. Recommended for icons.

...