Table of Contents

maxLevel	2

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.

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.

...

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

The tab index flow will follow this order. Shift + Tab will follow the reverse order.

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

...

Keyboard	Description
Tab	Navigates to the next component according to 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 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 tab navigation If tab is not selected - selects the tab. If tab is selected - focus will navigate to the 2nd level currently selected tab. In the 2nd level tab navigation If tab is not selected - selects the tab If tab is selected - Focus will navigate to the 1st focusable element under tab content
Esc	Depending on component.
Arrows	Unless otherwise specified are N/A Regarding tab navigation 1st and 2nd levels: Left/Right - navigates between tabs right or left accordingly. Up/Down - navigates between levels 1st and 2nd accordingly
Home	Sets focus on the 1st element in VerinTop
End	Sets focus on the last element in VerinTop

...

Image Added

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 and moves focus to the 1st item	in 1st level tab navigation - N/A In the 2nd level tab 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 tab navigation - N/A In the 2nd level tab 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		Unless otherwise specified are N/A Left/Right - navigates between right and left sides. Up/Down In 1st level tab navigation - navigates focus and selection Up/Down accordingly In the 2nd level row - navigates only focus Up/Down accordingly

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

...

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

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