Vertical navigation

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

View source code

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

Keyboard interactions

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.

Keyboard interactions

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.

Keyboard interactions

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.