CSS Mastery

Patterns / intermediate

Navigation shells with crawlable links and responsive behavior

Navigation is both an interface and a crawl path, so it should be real links before it becomes an interaction.

By Andrew J Hughes

A navigation shell has two jobs: help people move through the site and expose important paths to crawlers. The first version should be plain, crawlable HTML links. Enhancement can come after that.

<nav aria-label="Primary navigation">
  <a href="/field-guide">Field Guide</a>
  <a href="/patterns">Patterns</a>
  <a href="/debugging">Debugging</a>
  <a href="/demos">Demos</a>
</nav>

This is not primitive. It is resilient. A crawler can follow it, a keyboard user can tab through it, and the links still work without JavaScript.

Responsive does not always mean hidden

Many sites collapse navigation too early. If there are five short links, wrapping them may be better than hiding them behind a menu button. Reserve disclosure navigation for cases where the number of items or viewport constraints truly require it.

.primary-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

This pattern is boring in the best way. It avoids JavaScript state, avoids focus management complexity, and keeps important sections visible.

Use aria-current

<a href="/debugging" aria-current="page">Debugging</a>

aria-current gives assistive technology a clear signal and gives CSS a stable styling hook.

Keep ads out of navigation zones

If a site will be monetized, navigation clarity matters even more. Ad units should never sit where a reader expects menu links, download links, or code actions. Keep the navigation shell visually and structurally separate from advertising.

References