Skip to content
Jewel

Header

The sticky glass bar at the top of every page: the wordmark, the main links and any actions. On phones the links fold into a menu that opens the side nav as a drawer.

CSS
css/components/header.css
JS
js/components/sheet.js, js/components/side-nav.js (phone menu)

01 — Options

A. Links

The default, and what this site uses. Up to five links, with the current page underlined. Below 48rem the links fold into the menu button.

Jewel

B. Links and an action

For apps with one main action. The button stays visible on phones beside the menu button.

Jewel

C. Search

For sites people search more than browse. The search takes the spare width; on phones it hides, so put one in the drawer or at the top of the page.

Jewel

D. Menu only

.nav--drawer shows the menu button at every width and never the links. For apps with many sections, where a side nav does the work.

Jewel

02 — In a page

Markup

Put the header first inside .page, after the background and the cap. The menu button opens the side nav drawer: see Side nav.

HTML
<div class="jewel-bg" aria-hidden="true"></div>
<div class="jewel-cap" aria-hidden="true"></div>
<div class="page">
  <header class="site-header">
    <div class="panel site-header__inner">
      <a class="wordmark link-quiet" href="/">Jewel</a>
      <nav class="nav" aria-label="Primary">
        <span class="nav__links">
          <a href="/work/" aria-current="page">Work</a>
          <a href="/about/">About</a>
        </span>
        <button class="btn btn--ghost btn--icon nav__menu" type="button" data-sheet-open="site-nav" aria-label="Menu" aria-controls="site-nav">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
      </nav>
    </div>
  </header>
  …
</div>

03 — Usage

Use it for

  • One header per page, the same on every page.
  • Short link labels, one word where possible.
  • .nav--keep instead of a menu button when there are only two or three links: they wrap on phones.

Avoid

  • More than five links. Move the rest into a side nav.
  • A theme toggle. Jewel is dark only.
  • Hiding links on phones with no menu button.

04 — Accessibility

Notes

  • The nav is a landmark labeled “Primary”. Mark the current page with aria-current="page".
  • The menu button keeps aria-expanded in step with the drawer.
  • Add a skip link before the header so keyboard users can jump to the content, as this site does.