Sub navigation

Sub navigation is used to move among related sections within the same context. There are 4 levels of sub navigation with a distinct visual style that gradually nest deeper within related sections as needed.

Subnav: Level 1

Located at the bottom of the page header, used to navigate within a top level section of the control panel.


Subnav: Level 2

Located at the top of a content body background, used to navigate within subnav level 1.


Subnav: Level 3

Often located directly beneath subnav level 2, used to navigate within subnav level 2.


Subnav: Level 4

Often located within the content of subnav level 3, used to navigate around a specific component.


Best practices


  • Code your navigation using link tags.
  • Put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired people the most information possible about the contents of the navigation.
  • Use the semantic <nav> tag around your unordered list and links with an ARIA role='navigation' attribute.
  • Optionally, attach an aria-label attribute to your navigation to give users of assistive technology as much information as possible (especially if there are multiple navigations on your site).