Vertical navigation

VerticalNavigation allows users to navigate between distinct applications and website pages.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

Display only links that the user can access.
Provide an accessible name for each vertical navigation component. This is important for screen reader users to understand the purpose of the navigation.
- Use aria-label or aria-labelledby to provide an accessible name.
- If more than one vertical navigation component is present on the page, ensure that each has a unique accessible name.
- Avoid adding the word “navigation” to the accessible name. Assistive technologies will announce it automatically due to its role.

Key	Function
`Tab`	Tab moves focus into the first navigation item in the vertical group. Sets focus to the entire component. If a navigation item is selected before the navigation item receives focus, Tab sets focus on the selected item. When the navigation item has children, second key press moves focus on to the arrow icon. When the navigation item has focus, Tab moves focus out of the navigation item to the next component in tab order.
`Shift` + `Tab`	If focus is below the navigation item, this action moves focus to the currently selected navigation item in the navigation item component. If focus is on an item inside the navigation group, this action moves focus out of the navigation to the previous focusable element in the tab order.
`Enter` / `Space`	This action selects the focused navigation item. For vertical navigation, this action triggers the navigation item to reveal nested levels within the navigation. For horizontal navigation, this action triggers the navigation item to reveal expanded list or mega-menu.

Display only links that the user can access.
Provide an accessible name for each vertical navigation component. This is important for screen reader users to understand the purpose of the navigation.
- Use aria-label or aria-labelledby to provide an accessible name.
- If more than one vertical navigation component is present on the page, ensure that each has a unique accessible name.
- Avoid adding the word “navigation” to the accessible name. Assistive technologies will announce it automatically due to its role.

Key	Function
`Tab`	Tab moves focus into the first navigation item in the vertical group. Sets focus to the entire component. If a navigation item is selected before the navigation item receives focus, Tab sets focus on the selected item. When the navigation item has children, second key press moves focus on to the arrow icon. When the navigation item has focus, Tab moves focus out of the navigation item to the next component in tab order.
`Shift` + `Tab`	If focus is below the navigation item, this action moves focus to the currently selected navigation item in the navigation item component. If focus is on an item inside the navigation group, this action moves focus out of the navigation to the previous focusable element in the tab order.
`Enter` / `Space`	This action selects the focused navigation item. For vertical navigation, this action triggers the navigation item to reveal nested levels within the navigation. For horizontal navigation, this action triggers the navigation item to reveal expanded list or mega-menu.

Display only links that the user can access.
Provide an accessible name for each vertical navigation component. This is important for screen reader users to understand the purpose of the navigation.
- Use aria-label or aria-labelledby to provide an accessible name.
- If more than one vertical navigation component is present on the page, ensure that each has a unique accessible name.
- Avoid adding the word “navigation” to the accessible name. Assistive technologies will announce it automatically due to its role.

Key	Function
`Tab`	Tab moves focus into the first navigation item in the vertical group. Sets focus to the entire component. If a navigation item is selected before the navigation item receives focus, Tab sets focus on the selected item. When the navigation item has children, second key press moves focus on to the arrow icon. When the navigation item has focus, Tab moves focus out of the navigation item to the next component in tab order.
`Shift` + `Tab`	If focus is below the navigation item, this action moves focus to the currently selected navigation item in the navigation item component. If focus is on an item inside the navigation group, this action moves focus out of the navigation to the previous focusable element in the tab order.
`Enter` / `Space`	This action selects the focused navigation item. For vertical navigation, this action triggers the navigation item to reveal nested levels within the navigation. For horizontal navigation, this action triggers the navigation item to reveal expanded list or mega-menu.