Navigation Menus

Difficulty: Beginner

Navigation menus are how users move through a website. HTML provides the <nav> element specifically for this purpose, introduced in HTML5 to give semantic meaning to navigation sections. Before <nav> existed, developers used generic <div> elements with classes like 'navigation' -- the browser and assistive technologies had no built-in way to identify these as navigation regions.

The <nav> element represents a section of the page that contains navigation links, either within the current document or to other documents. A page can have multiple <nav> elements -- for example, a primary navigation bar at the top and a secondary sidebar navigation. When a page has multiple <nav> elements, use aria-label or aria-labelledby attributes to distinguish them, such as aria-label="Primary navigation" and aria-label="Footer navigation".

The conventional way to build navigation menus is to use an unordered list (<ul>) containing list items (<li>), each wrapping an anchor tag (<a>). This pattern has been the standard for decades because it provides semantic structure (a list of related links), is inherently accessible (screen readers announce the number of items), and is easy to style with CSS. While it is technically possible to put anchor tags directly inside a nav without lists, the list approach provides better semantics and screen reader support.

Accessibility is critical for navigation. Screen readers use landmark roles to help users jump to different sections of a page. The <nav> element automatically has the role="navigation" landmark, allowing screen reader users to skip directly to it. Additionally, marking the current page in the navigation with aria-current="page" helps users understand where they are in the site structure. Always ensure navigation links have sufficient color contrast and are keyboard-accessible.

Responsive navigation is a key consideration for modern websites. On large screens, navigation is typically displayed as a horizontal bar. On small screens, it often collapses into a hamburger menu or a slide-out drawer. While the responsive behavior is typically handled with CSS and JavaScript, the underlying HTML structure should remain semantic and accessible regardless of the visual presentation.

Code examples

Basic Semantic Navigation

<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

This is the standard navigation pattern: a <nav> element containing an unordered list of links. The aria-label helps screen reader users distinguish this from other nav elements on the page.

Navigation with Current Page Indicator

<nav aria-label="Main menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <a href="/products" aria-current="page">
        Products
      </a>
    </li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</nav>

<style>
  nav a[aria-current="page"] {
    font-weight: bold;
    border-bottom: 2px solid currentColor;
  }
</style>

The aria-current='page' attribute indicates which link corresponds to the current page. Screen readers announce this as 'current page', and you can use the attribute selector in CSS to style it visually. This is preferred over adding a CSS class like 'active'.

Multiple Navigation Regions

<!-- Primary nav in header -->
<header>
  <nav aria-label="Primary navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><span aria-current="page">Widget Pro</span></li>
  </ol>
</nav>

<!-- Footer navigation -->
<footer>
  <nav aria-label="Footer navigation">
    <ul>
      <li><a href="/privacy">Privacy Policy</a></li>
      <li><a href="/terms">Terms of Service</a></li>
      <li><a href="/sitemap">Sitemap</a></li>
    </ul>
  </nav>
</footer>

A page can have multiple <nav> elements. Use aria-label to give each one a unique name so screen reader users can distinguish between them. Note that breadcrumbs use an ordered list (<ol>) since the order matters.

Navigation with Nested Dropdown

<nav aria-label="Main menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <a href="/products">Products</a>
      <ul>
        <li><a href="/products/software">Software</a></li>
        <li><a href="/products/hardware">Hardware</a></li>
        <li><a href="/products/services">Services</a></li>
      </ul>
    </li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Dropdown menus are created by nesting a <ul> inside a <li>. The nested list is typically hidden with CSS and revealed on hover or focus. The HTML structure clearly represents the parent-child relationship between menu items.

Key points

Only use <nav> for major navigation blocks. Do not wrap every group of links in a <nav> -- it is intended for primary, secondary, and footer navigation sections.
Breadcrumb navigation should use an ordered list (<ol>) because the sequence matters. Regular menus use unordered lists (<ul>) because the order is not inherently sequential.
Always make navigation keyboard-accessible. Users should be able to Tab through all links and activate them with Enter.

Concepts covered

nav Element, Semantic Navigation, Unordered Lists for Menus, ARIA Labels, Accessibility