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-1

Subnav: Level 2

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

subnav_2

Subnav: Level 3

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

subnav_3

Subnav: Level 4

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

subnav_4

Answer

Best practices

Accessibility

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).