Description

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

Top navigation should be used:

• By default, if the menu options fit.

• When there are 7 or fewer menu items at each level.

• When there are only 2 levels in the menu hierarchy.

Otherwise, use Left Navigation Mode.

Structure

• Top navigation can have 1 or 2 levels.

• Each level can include up to 7 items.

• 1st level item labels may wrap onto 2 lines.

• 2nd level item labels can only be presented on one line.

• A grey line separates 1st and 2nd level navigation.

• A blue line is shown underneath the selected item(s).

Placement and positioning

• Top navigation is shown in the header bar, at the top of the page.

• It always extends across the full width of the page.

States

Default state

By default, the first item will be selected, unless otherwise configured by the user. Where there is more than 1 level, the first item at each level will be selected.

Internal logic

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

• Menu items should be shown in a logical order, with the most commonly used first.

• The width of each item should be responsive to the item label, up to a maximum of x characters. Item widths may be greater where there are fewer than 7 items in a level.

• 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 for top navigation.

Spacing

• First level navigation 20px

• Second level Navigation 10px

• There is also a spacing within each item for the blue line (3px from each side)

Interactions

ADD IMAGES

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

Accessibility Compliance

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

Responsive Design

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

Design

Code

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