ds
Patterns
Product header

Product header

fin1te / lab: the header for tool subdomains, with a switcher.

fin1te lab

Show code

<header class="hdr">
  <div class="wrap hdr-row">
    <div class="hdr-brand">
      <a class="brand" href="https://fin1te.com"><span class="mark" aria-hidden="true"></span><span>fin1te</span></a>
      <span class="hdr-sep" aria-hidden="true">/</span>
      <a class="hdr-app" href="/">lab</a>
      <div class="dropdown">
        <button class="switcher" aria-label="Switch product" aria-haspopup="menu" aria-expanded="false" aria-controls="apps">
          <svg class="i">…</svg>
        </button>
        <div class="menu apps" role="menu" id="apps" hidden>
          <a class="mi" role="menuitem" href="https://topo.fin1te.com"><span>topo<span class="mi-sub">Architecture diagrams</span></span></a>
          <a class="mi" role="menuitem" href="/" aria-current="page"><span>lab<span class="mi-sub">Private browser tools</span></span></a>
          …
        </div>
      </div>
    </div>
    <nav class="nav" aria-label="lab"><ul><li><a href="/cronmap" aria-current="page">Cronmap</a></li> …</ul></nav>
    <div class="hdr-tools"><button class="ibtn" data-action="theme" aria-label="Toggle colour theme">…</button></div>
  </div>
</header>

fin1te ack

Code

<a class="hdr-app" href="/">ack</a>   <!-- the same header, another name -->

The header for tool subdomains. It is fin1te.com's site header with a second name: sticky, 3.5rem, the page colour at 86% with a blur, mono brand, the purple mark that turns on hover. "fin1te" goes to fin1te.com, the product name goes to the product's home, and the chevron opens a switcher with every product, the current one marked. The header on this site is the same pattern.

Keep the product's own links to two or three. Search belongs here only if the product has something to search; the theme button always does.

API

Class	On	What it does
`.hdr-brand`	div	Brand, slash, product name and switcher, kept together.
`.hdr-sep`	span	The slash, in --faint.
`.hdr-app`	a	The product's name, linking to its home.
`.switcher`	button	Chevron that opens the menu. The chevron turns when aria-expanded is true.
`.menu.apps`	div	The product list, aligned under the brand.
`.mi-sub`	span	Second line of a menu item.
`aria-current="page"`	.mi	The product you are on: a purple dot.

Behaviour

Click or Arrow Down opens the menu and focuses the current product; arrows move, Escape closes and returns focus, Tab or a click outside closes it.
Under 760px the product's links move to a second row that scrolls sideways, like fin1te.com's.
Set the theme before first paint with the snippet in getting started; the button only flips data-theme and saves it.