Learn how to build semantic navigation menus, breadcrumbs, skip-to-content links, and pagination using proper HTML structure and ARIA attributes.
The <nav> element represents a section of navigation links. Not every group of links needs a <nav> — reserve it for major navigation blocks like the site menu, sidebar navigation, or breadcrumbs.
When a page has multiple <nav> elements, give each one an aria-label so assistive technologies can distinguish them:
<nav aria-label="Primary">
<!-- Main site navigation -->
</nav>
<nav aria-label="Breadcrumb">
<!-- Breadcrumb trail -->
</nav>Screen reader users can jump directly to navigation landmarks, so labelling them is important.
A horizontal or vertical menu, typically in the header. Use an unordered list inside <nav>:
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>A trail showing the user's location in the site hierarchy. Use an ordered list (since order matters) with aria-label="Breadcrumb" on the nav and aria-current="page" on the last item:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/courses/html" aria-current="page">HTML</a></li>
</ol>
</nav>Placed as the very first element in <body>, it lets keyboard users skip past navigation to the main content. It is visually hidden until focused:
<a href="#main" class="skip-link">Skip to main content</a>Pagination links let users navigate through multi-page content. Wrap them in a <nav> with aria-label="Pagination":
<nav aria-label="Pagination">
<ul>
<li><a href="?page=1" aria-label="Page 1">1</a></li>
<li><a href="?page=2" aria-current="page" aria-label="Page 2, current">2</a></li>
<li><a href="?page=3" aria-label="Page 3">3</a></li>
<li><a href="?page=3" aria-label="Next page">Next »</a></li>
</ul>
</nav>Key accessibility details:
aria-current="page" marks the current page.aria-label on each link provides context ("Page 2" instead of just "2").<!-- Skip link (first element in body) -->
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<!-- Primary navigation -->
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a aria-current="page" href="/courses/html">HTML</a></li>
</ol>
</nav>
<main id="main">
<h1>HTML Course</h1>
<p>Welcome to the HTML course.</p>
</main>Why should you add aria-label to <nav> elements when a page has multiple navigations?