...

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

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

Spacing between menu items

• First level items: 20px

• Second level items: 10px

• Each item also has an extra 3px beyond the label on each side, to allow for the blue line on selection.

...

States

...

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

...

Code

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