1.5. Structure primary and secondary navigation menus with <nav role="navigation">

Primary and secondary navigation menus must be marked up with <nav role="navigation">.

Note

The <nav role="navigation"> element is reserved for website’s internal links.

For example:

  • The main menu.
  • The sub-menu.
  • The breadcrumb.
  • The search results page number.

In other words, it must not be used to mark up a list of external links, such as a list of social media links.

Tip

Good practice is to add an aria-label attribute to the <nav role="navigation"> tag to specify the type of navigation system.

<header role="banner">[…]</header>
<nav role="navigation" aria-label="Primary menu">[…]</nav>
<nav role="navigation" aria-label="Secondary menu">[…]</nav>
<main role="main">
   <nav role="navigation" aria-label="You are here">[…]</nav>
   […]
</main>
<footer role="contentinfo">[…]</footer>

Find out more

Comments

Add a comment

All fields are mandatory.

Back to top