Skip to main content

Side Navigation

Vertical, collapsible navigation on the left side of the application.

Implementations

Accessibility

  • Use unordered list <ul> groups for side navigation.
  • Place side navigation (the list group) in a nav element. The nav element should also be marked with aria-label="side navigation" to clearly describe the type of navigation.
  • Use the aria-current="true" attribute to indicate the item that is currently selected, or—in a navigational context—use aria-current="page" to indicate the page that is currently selected. The aria-current attribute should be updated when the user makes a selection.
  • Make sure the tab order matches the hierarchy and that the user can navigate through all levels and items with a keyboard.
View on GitHub