Only one item at a time can be selected from each level.When a 1st level
item is selected, the 2nd level items should be updated appropriately2nd level navigation should only be shown where relevant. Otherwise, the area beneath the line will remain empty.
Where there are 2 levels of navigation, only 2nd level items will load pages within the application. 1st level items only allow access to 2nd level items.
Menu items should be shown in a logical order, with the most commonly used first.
Menu item widths may be greater where there are fewer than 7 items in a level. The width of each item should be responsive to the item label, with the following limits:
- 1st level item labels: up to 30 characters (across 2 lines).
- 2nd level item labels: up to 16 characters (1 line only).
Truncation should be avoided, where possible, by using short labels.2nd level navigation should only be shown where relevant. Otherwise, the area beneath the line will remain empty.
No horizontal scroll can be used within top navigation.

Interactions

On Where there is only 1 level of navigation, selecting an item from the menu, the user will be redirected to the relevant page.
The current selection is shown for 1st and 2nd level navigation at all times, using a blue line underneath the item(s).
Selecting a 1st level item will also automatically select the first 2nd level item, if one exists.
On hover, a lighter blue underline will be shown underneath the hovered itemwill immediately load the page.
Where there are 2 levels of navigation:
- when a 1st level item is selected,
  - the available 2nd level items will be shown.
  - the loaded page will not change.
- when a 2nd level item is selected, the relevant page will load.
- if a 1st level item is selected but no 2nd level item is subsequently chosen, both levels of navigation will return to the currently-selected page after hovering away from the VerinTop for >1s.

Expand-Collapse behavior

...