The header bar should expand/collapse with a transition effect.

No item selected

By default, the primary 1st level and 2nd level menu items should be selected when landing. However, in some instances there may be limitations which require a ‘No item selected’ state. In this case:

no blue selection lines or second level navigation are shown in the Verintop menu.
an animated graphic will be shown in the main workspace, explaining that the user must select a menu item.

...

On narrower screens, the message ‘Select a destination’ will be shown instead of the selected menu item, using a hint text colour.

See the Responsive Design section below for more information.

...

Best Practices

General

Truncation should be avoided, where possible, by using short labels.
Number of items for both 1st and 2nd levels should not exceed 8 items.

...

The entire menu should be replaced by a menu icon button ⋮.
When the icon button is clicked, a drop-down menu will open.
- 1st level menu items will be shown on the left.
- When a 1st level menu item is hovered over or clicked, the related 2nd level menu items will be shown on the right.
- When a 2nd level menu item is selected:
  - the menu will close.
  - the new page will be shown in the workspace.
The current selection should be shown at both levels with a blue check mark.
When the menu is first opened, the currently-selected 1st level and 2nd level menu items should be shown by default.
The current selection should be shown at both levels.
A hover state should be shown for all menu items on hover (unless using a touch device).
Where possible, the selected page menu item will be shown next to the menu icon button in the header bar. This should include both 1st and 2nd levels, separated by a >.
- Where no menu item is currently selected, the message ‘Select a destination’ will be shown instead. See No item selected for more information.