Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel1
minLevel1

...

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

UPDATE IMAGE

...

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.

Spacing between menu items

  • 1st level items: 20 px

  • 2nd level items: 10 px

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

...

Default state

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

Image Added
 
Image Added

 

Hover

 
Image AddedImage Added

 

Active

Image Added
 
Image Added

 

Selected

Image AddedImage Added

 

 

Focused

Selected, Hover
Image Added
 
Image Added

 

Focused, Hover

Image Added
 
Image Added

 

Focused,

Hover

Active

Image Added
 
Image Added

 

Focused, Selected

 
Image AddedImage Added

 

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

Images need bell icon adding

Show hover state (expanded but still with the expand icon)

State

Image

Expanded

Image Modified

Collapsed

Image Modified

Default state

On first opening, the top should be expanded.

...

Tab order may vary slightly due to missing or additional components. The main flow is left to right by navigation level.

<Update image with visual>

...

Keyboard

Description

Tab

Navigates to the next component according to the Tab Index Order.

From the last component will navigate to the next focusable element on the page.

Shift + Tab

Navigates to the previous component according to the Tab Index Order.

From the first component will navigate to the last focusable element on the page

Space

Depending on component.

Enter

Depending on component.

  • In 1st level navigation:

    • If no item is selected - selects the item.

    • If an item is selected - focus will navigate to the 2nd level navigation for the selected item.

  • In the 2nd level navigation:

    • If no item is selected - selects the item.

    • If an item is selected - focus will navigate to the first focusable element within the page content.

Esc

Depending on component.

Arrows

Within top navigation at 1st and 2nd levels:

  • Left/Right - navigates between items, left or right accordingly.

  • Up/Down - navigates between 1st and 2nd levels accordingly.

Otherwise N/A.

Home

Sets focus on the first element in VerinTop.

End

Sets focus on the last element in VerinTop.

Tab index order for responsive layout

...

Image Modified

Within the navigation menu <TBD and review this part again - especially should behavior change from regular top navigation>

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 under 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 under row content.

Esc

Closes the menu without updating the selection.

Arrows

  • Left/Right - navigates between the left and right 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.

Responsive Design

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

Design

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
Image Modified>>

<<Screen with 200 width>>

Code

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