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.
Located at the bottom of the page header, used to navigate within a top level section of the control panel.
Located at the top of a content body background, used to navigate within subnav level 1.
Often located directly beneath subnav level 2, used to navigate within subnav level 2.
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).