Build Reusable Navigation

Navigation looks like links.

Architecturally, it is a shared description of the site's information structure.

If every page owns its own navigation list, you can create contradictory site maps.

Start simple

Use _includes/navigation.html for markup.

For now, a small navigation can be written directly:

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

Then use page.url to identify the current page if useful.

The official tutorial demonstrates this idea before moving the link data into _data.

Current-page state

Instead of inline color styles, use semantic class/attribute state:

<a href="/about.html"
   {% if page.url == "/about.html" %}aria-current="page" class="current"{% endif %}>
  About
</a>

You will style .current in Unit 5.

Inspect generated navigation on two pages

Build Home and About.

Confirm:

• both contain the same navigation links;
• only the current page has the current-page marker;
• the generated href values point where you expect.

One change test

Add one link to the include.

Build.

Count how many generated pages change.

That is the leverage of shared source.

Boundary warning

Hard-coded root-relative URLs such as /about.html can become a deployment problem when a site is served from a subpath.

Do not solve that yet with random string concatenation.

Unit 4/6 will teach URL helpers and baseurl deliberately.

Checkpoint

Record:

Shared navigation source:
Pages affected by one edit:
Current-page evidence:
Known URL assumption we have not solved yet: