Before this lesson

Understand HTML links, lists and CSS Flexbox. This example needs neither a database nor local storage.

What you will be able to do

Build navigation that survives changing link counts and distinguish navigation from actions.

Understand the mechanism

Start with nav and real links, then add Flexbox. Links navigate; buttons act on the current page. Do not substitute a clickable div for a link. Mark the current page with aria-current="page" for both visual and assistive feedback.

Let content drive layout: flex-wrap permits wrapping and gap controls spacing. Avoid fixed heights that clip a second row. Long labels are test data; shortening them can hide rather than solve a layout problem.

Keep keyboard order consistent with reading order. Preserve a visible focus-visible outline instead of globally removing outline. A small mobile navigation can simply wrap instead of requiring a collapsed menu.

Runnable example

<style>
nav { display:flex; flex-wrap:wrap; gap:20px; padding:20px; background:#edf6ee; }
nav a { color:#185c43; text-underline-offset:4px; }
nav a:focus-visible { outline:3px solid #185c43; outline-offset:4px; }
</style>
<nav aria-label="Main navigation">
  <a href="#home">Home</a><a href="#lessons">Lessons</a><a href="#about">About</a>
</nav>
<section id="home"><h1>Home</h1></section>
<section id="lessons"><h2>Lessons</h2></section>
<section id="about"><h2>About</h2></section>

Trace and verify

Place the snippet in body. Test 320, 768 and 1280 pixel widths for clipping or overlap. Tab through links and activate them with Enter, checking destinations. Repeat with one longer English label.

Common mistakes and boundaries

Fragment links need corresponding IDs; a set of # placeholders is not finished navigation. Give multiple nav regions distinct labels. Touch interaction cannot depend on hover to reveal essential actions.

Practice challenge

Style the current page with an underline or weight change as well as color. Add six links to verify multiple rows.

Reference solution and reasoning

Style the aria-current attribute directly to avoid maintaining a separate class that can drift. Keep container height automatic.

nav a[aria-current="page"] { font-weight:700; text-decoration-thickness:3px; }

Further reading