Description
Navigation allows users to move between pages in the selected application.
Left navigation should be used:
When there are more than 7 menu items at any level.
When there are 3 or more levels in the menu hierarchy.
Otherwise, use Top Navigation.
Note: Left navigation cannot be used in conjunction with the Filter Pane.
Structure
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.
When the left navigation is in a collapsed state, it will simply consist of:
The left hand grey column.
The blue marker in the location of the top level of the selected item.
Placement and positioning
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
State | 1st level navigation | Additional level navigation | Comment |
|---|---|---|---|
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 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.
Interactions
Selecting navigation items
Any part of an item can be selected to select it.
On selecting an item from the 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 only or close the hierarchy, without redirecting the user to another page.
Only one item for each level can be expanded at a 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, or vice versa.
change the icon button from an expand arrow to a collapse arrow, or vice versa.
When unpinned:
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
When 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.
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.