🔗 Phase 5 · Links & Navigation🟢 BeginnerMODULE 15

Navigation Menus

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress43%

🎯 What you'll learn: How to combine <nav>, <ul>, and <a> into the real-world navigation bar pattern used on almost every website, plus marking the current page for accessibility.

Section 1

The Standard Nav Pattern

A navigation menu is semantically a list of links, wrapped in a <nav> landmark element so assistive technology can identify it as navigation and let users jump straight to it.

nav-basic.html

HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

CSS then removes the bullets and lays the items out horizontally with display: flex — the semantic structure (a real list) stays intact underneath the visual styling.

Section 2

Marking the Current Page

Use aria-current="page" on the link matching the current page. This tells screen readers which nav item is active — don't rely on color alone, since that provides no information to non-sighted users.

nav-current.html

HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html" aria-current="page">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

<!-- CSS can then target it visually too -->
<style>
  a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid; }
</style>

Section 3

Multiple Nav Landmarks

A page can have more than one <nav> — a main header nav, a footer nav, and a sidebar table-of-contents nav. When there's more than one, label each with aria-label so screen reader users can tell them apart.

nav-multiple.html

HTML

<nav aria-label="Main">
  <ul>...</ul>
</nav>

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

⚠️

Not every list of links needs <nav>

Reserve <nav> for major navigation blocks (main menu, footer links, breadcrumbs). A small inline list of related article links doesn't need to be a nav landmark — overusing <nav> makes the "jump to navigation" screen reader shortcut less useful.

Section 4

Skip Links for Keyboard Users

A "skip to main content" link, hidden visually but focusable by keyboard, lets keyboard/screen-reader users bypass a long nav menu instead of tabbing through every link on every page.

skip-link.html

HTML

<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav>...</nav>
  <main id="main">...</main>
</body>

<style>
  .skip-link { position: absolute; left: -9999px; }
  .skip-link:focus { left: 1rem; top: 1rem; } /* visible when tabbed to */
</style>

🧩 Knowledge Check — Lesson 15

5 questions to test your navigation menu knowledge.

1. What is the standard pattern for a navigation menu's HTML structure?

2. What does aria-current="page" do?

3. Why label multiple <nav> elements with aria-label?

4. What is a "skip link" for?

5. Should every small group of related links on a page be wrapped in <nav>?

💪

Coding Challenge — Lesson 15

Apply what you learned · Beginner Level

Challenge: Build a Full Site Navigation

1. Build a <nav aria-label="Main"> with 4 links: Home, Courses, Blog, Contact.
2. Mark "Courses" as the current page using aria-current="page".
3. Add a hidden skip link before the nav that jumps to "#main".

💡 Show hints if you're stuck

Structure: <nav aria-label="Main"><ul><li><a>...</a></li></ul></nav>
Skip link goes right after <body>, before <nav>

Finished this lesson?

Mark it complete to track your progress.

Module 15 of 62Phase 5 — Links & Navigation

Navigation Menus

The Standard Nav Pattern

Marking the Current Page

Multiple Nav Landmarks

Skip Links for Keyboard Users

Lesson 15 Complete!