Navigation Project

title: "Navigation Project — Build a Complete Accessible Navigation System" description: "Build a production-ready accessible navigation system combining skip links, mega menu, hamburger menu, breadcrumbs, and current page indication." weight: 15 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

Apply all navigation patterns by building a complete navigation system with responsive design, keyboard support, and screen reader compatibility.

## What You'll Learn

How to combine skip links, landmarks, mega menus, breadcrumbs, and mobile hamburger patterns into a single production-ready navigation system.

## Why It Matters

A complete navigation system ties together all navigational components. Users must be able to access any page, understand where they are, and move through the site efficiently.

## Real-World Use

A user visits a documentation site. The site has a skip link, a main navigation with dropdowns, breadcrumbs showing the path, and a footer navigation. The user can navigate with keyboard alone and understand their location at all times.

## Complete Navigation Structure

```html
<!-- Skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Site header with navigation -->
<header role="banner">
  <a href="/" aria-label="DodaTech home">
    <img src="logo.svg" alt="" width="120" height="30">
  </a>

  <nav aria-label="Main">
    <!-- Hamburger toggle for mobile -->
    <button aria-expanded="false" aria-controls="main-menu"
            aria-label="Open navigation menu"
            class="hamburger">
      <span aria-hidden="true">Menu</span>
    </button>

    <ul id="main-menu">
      <li><a href="/" aria-current="page">Home</a></li>
      <li>
        <button aria-expanded="false" aria-haspopup="true"
                aria-controls="products-menu">
          Products
        </button>
        <ul id="products-menu" hidden
            aria-label="Products submenu">
          <li><a href="/browser">Doda Browser</a></li>
          <li><a href="/zip">DodaZIP</a></li>
          <li><a href="/antivirus">Durga Antivirus Pro</a></li>
        </ul>
      </li>
      <li><a href="/docs">Documentation</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li aria-current="page">Accessibility</li>
  </ol>
</nav>

<!-- Main content -->
<main id="main-content" tabindex="-1">
  <h1>Accessibility Guide</h1>
</main>

<!-- Footer -->
<footer role="contentinfo">
  <nav aria-label="Footer">
    <ul>
      <li><a href="/privacy">Privacy</a></li>
      <li><a href="/terms">Terms</a></li>
      <li><a href="/sitemap">Sitemap</a></li>
    </ul>
  </nav>
</footer>

JavaScript

// Hamburger toggle
document.querySelector('.hamburger').addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  document.getElementById('main-menu').hidden = expanded;
  this.setAttribute('aria-label',
    expanded ? 'Open navigation menu' : 'Close navigation menu');
});

// Dropdown submenus
document.querySelectorAll('[aria-haspopup]').forEach(trigger => {
  trigger.addEventListener('click', function() {
    const expanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', !expanded);
    const menu = document.getElementById(this.getAttribute('aria-controls'));
    menu.hidden = expanded;
  });
});

// Escape closes menus
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('[aria-expanded="true"]').forEach(el => {
      el.setAttribute('aria-expanded', 'false');
      const menu = document.getElementById(el.getAttribute('aria-controls'));
      if (menu) menu.hidden = true;
    });
  }
});

Common Mistakes

1. Navigation not responsive

The navigation must work on mobile (hamburger) and desktop (horizontal) without losing accessibility.

2. Inconsistent keyboard behavior

All submenus should use the same keyboard pattern (Enter to toggle, Escape to close).

3. Missing footer navigation landmark

Footer links need their own nav landmark with a unique label.

4. No skip link at the very top

The skip link must be the very first element in the DOM, before the header.

5. Focus not returning to trigger

When a submenu or hamburger menu closes, focus must return to the trigger element.

Practice Questions

1. What is the correct DOM order for a complete navigation system? Skip link first, then header with navigation, then breadcrumbs, then main content, then footer.

2. How many nav elements are in the complete system? Three: main navigation, breadcrumbs, and footer navigation, each with a unique aria-label.

3. What key returns focus to the trigger when closing a submenu? Escape closes the submenu and focus returns to the trigger button.

Challenge: Build the complete navigation system and add a fourth navigation region: table of contents in the sidebar. Ensure all landmarks have unique labels.

FAQ

Mini Project

Build the complete navigation system and add it to a multi-page site. Test every component: skip link, hamburger menu, dropdown submenus, breadcrumbs, footer nav, and current page indication.

What's Next

Now explore Accessible Modals and Dialogs to learn how to build accessible popup components.