Navigation

Landmark structure and current-page indication for site navigation.

Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.

Implementation

Landmark structure needs no JavaScript widget at all: a labeled <nav> for each distinct group of navigation links, and aria-current="page" on the active link. Semantic HTML is the whole solution, so the native and custom approaches are identical. (Bypassing that repeated navigation is its own concern — see the Skip Link component.)

navigation-pattern.tsx

<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>

<footer>
  <nav aria-label="Footer">
    <ul>...</ul>
  </nav>
</footer>

/* Semantic HTML already covers this pattern completely — the "native" and
   "custom" implementations are the same markup. Every <nav> gets a
   distinguishing aria-label since a page can have more than one. */

Live demo

This demo nav is scoped with its own aria-label="Demo navigation" so it doesn't collide with this site's real header/footer navigation when you test landmarks on this page. Click a link to move the "current page" indicator.

Required roles, states & properties

Required roles, states, and properties
Element	Attribute	Why
Each <nav>	aria-label (distinguishing)	A page commonly has more than one navigation landmark (header, footer, breadcrumb, in-page). Each needs a unique accessible name so a landmark list reads "Main navigation," "Footer navigation," etc. instead of three identical "navigation" entries.
Active link	aria-current="page"	Identifies which link in the nav represents the page currently being viewed — announced as "current page" and commonly used as a CSS hook for the active-state style.

Keyboard interaction model

Keyboard interaction model
Key	Behavior
`Tab / Shift+Tab`	Moves through each nav link in document order — no arrow-key or roving-tabindex behavior is expected for a plain link list.

Focus management rules

No roving tabindex or arrow-key handling is expected — a nav link list uses plain sequential Tab order.
Focus moves through links in document order; the active link (aria-current) does not change the tab sequence.

WCAG 2.2 success criteria mapping

WCAG 2.2 success criteria that apply to this component
SC	Name	Level	Why it applies
1.3.1	Info and Relationships	A	Structure and relationships conveyed visually are also programmatically determinable.
2.4.1	Bypass Blocks	A	A mechanism (such as a skip link or landmarks) is available to bypass blocks of content repeated on multiple pages.
2.4.3	Focus Order	A	Focusable components receive focus in an order that preserves meaning and operability.
4.1.2	Name, Role, Value	A	For all UI components, name, role, and value are programmatically determinable; states and changes are announced.

Find what you need, instantly