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.
- 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
- Optionally, attach an
aria-labelattribute to your navigation to give users of assistive technology as much information as possible (especially if there are multiple navigations on your site).