navigation

Landmark role

Identifies a major block of navigation links, exposing it as a landmark users can jump to. Give each navigation region a distinct label when a page has more than one, such as 'Primary' and 'Breadcrumb'. The native `<nav>` element conveys this role automatically.

role="navigation"

Used on

A container for a set of navigation links. Prefer the native <nav>.

Accessible name

Recommended when there is more than one nav, via aria-labelledby or aria-label.

Used by components

Navigation Breadcrumb Pagination

Example

role="navigation"

<nav aria-label="Breadcrumb">
  <ol>…</ol>
</nav>

See a live, tested example on the Navigation page

References

WAI-ARIA 1.2 specification
MDN Web Docs