| Table of Contents | ||||
|---|---|---|---|---|
|
...
the suite name and the 2nd level of navigation will be hidden.
the user profile image will reduce in size.
States
State | Image |
|---|---|
Expanded |   |
Collapsed |  |
Collapsed On Hover |   |
Default state
On first opening the application, the top should be expanded.
...
on hover, a collapse icon button will appear below the product area.
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. An expand icon button will appear below the product area.
On removing hover the top will collapse again automatically.
Clicking the expand icon button will pin the header bar open.
...
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.
|
Esc | Depending on component. |
Arrows | Within top navigation at 1st and 2nd levels:
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
...
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.
. |
Responsive Design
For details on responsive design, see the main VerinTop page.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>