...

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.

  • can be up to 30 characters each.

• 2nd level item labels:

  • can only be presented on one line.

  • can be up to 16 characters each.

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

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

...

Placement and positioning

...

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

States

State	1st level navigation	2nd level navigation	Comment
Regular
Hover
Active
Selected
Focused
Focused, Hover
Focused, Active
Focused, 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.

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

  . Item widths may be greater where there are fewer than 7 items in a level

  • 1st level item labels: up to

  a maximum of x characters

  • 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

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.

...

• the suite name and the 2nd level of navigation will be hidden.

• the user profile image will reduce in size.

States

State	Image
Expanded	Image RemovedImage Added
Collapsed
Collapsed On Hover	Image RemovedImage Added

Default state

On first opening the application, the top should be expanded.

...

• on hover, a collapse icon button will appear below the product area.

  Image RemovedImage Added

• Clicking the collapse icon button will collapse the header bar.

...

• On hover:
  the expanded top will be shown automatically, revealing the 2nd level navigation and suite name and an . An expand icon button will appear below the product area.

  Image RemovedImage Added

• On removing hover the top will collapse again automatically.

• Clicking the expand icon button will pin the header bar open.

...

Tab index order for responsive layout

...

...

Keyboard	Trigger area	Menu
Tab	Navigates to the next component.	N/A
Shift + Tab	Navigates to the previous component.	N/A
Space	Opens the menu. Moves focus to the first item within the menu.	On 1st level navigation - N/A On 2nd level navigation: If row is not selected - selects the row and closes the menu. If row is selected - focus will navigate to the 1st focusable element in row content.
Enter	Opens the menu.	In 1st level navigation - N/A In the 2nd level navigation: If row is not selected - selects the row and closes the menu. If row is selected - focus will navigate to the 1st focusable element in row content.
Esc	N/A	Closes the menu without updating the selection. Moves focus to the trigger area.
Arrows	Up/Down - Opens the menu.	Left/Right - navigates between the left (1st level) and right (2nd level) sides accordingly. Up/Down: In 1st level navigation - navigates focus and selection Up/Down accordingly. In the 2nd level navigation - navigates only focus Up/Down accordingly. Otherwise N/A.

...

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

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