Header

A site header is one row of one square with a square of room around it: the brand at the start, in twelve squares as a page’s navigation column is, so the links stand over the work; the navigation two squares after it; the actions at the end. Every link is one square high, a square apart, in the text’s ink. The page you are on (aria-current="page") stands on a hairline of the full ink, the others show a faint one under the pointer.

Below thirty squares of width the navigation and actions fold away. A menu button, an icon button in the row’s last square, opens them over the whole screen, Overlay’s screen type on the page’s paper, its close button where the menu button stood, the links one square each. While it is open, Tab and Shift+Tab go round its controls and never leave it, Escape, the close button, a link or the screen widening close it, and the page behind holds its scroll and gets it back as it was. Closing returns focus to the menu button.

Design examples

An exhibition header

Example Code

A short identity, navigation and a single action share the top row.

Try it

A site header

Example Code

Make the preview narrower than thirty squares to fold the links into the drawer: Escape, the close button or a link closes it.

Use it

<ds-header brand="Name" literal>
  <a href="/">Home</a>
  <a href="/help">Help</a>
  <ds-button slot="actions" primary href="/download">Download</ds-button>
</ds-header>

The links are the page’s own <a href> elements, in the page, so they render without scripts and a search engine reads them. Unless one is marked, the link to the address being read gets aria-current="page". The menu button is named with the shared word “Menu” and the overlay’s close button with “Close”, in the page’s language. ds-header-menu reports the overlay opening and closing (detail.open); openMenu() and closeMenu() work it from code.

Attribute	Type	Default	What it does
brand	string	Empty	The site’s name, a link home: a translation key, or the words with literal.
href	string	/	Where the brand links.
label	string	Empty	The navigation’s accessible name, when a page has more than one.
literal	boolean	false	Show brand and label as written.
sticky	boolean	false	Stay at the top of the page as it scrolls, on the paper.

Slot	What it holds
Default	The navigation’s links.
brand	A brand of the page’s own: a logo, one square high.
actions	Buttons or links at the end of the row.

The screen overlay

attachOverlay() from 0-face/attach-overlay.ts is the mechanism the header and ds-page drawer share. Give it the toggle and the parts it folds away; it opens them in a dialog.ds-overlay.ds-overlay--screen (drawn by drawer.css) and puts them back on closing.

import { attachOverlay } from "/ds1/0-face/attach-overlay.ts";
const menu = attachOverlay({ toggle, content: [nav], closeLabel: "Close" });

In React

import { Header } from "./design/react/header";

<Header brand="Name" literal>
  <a href="/">Home</a>
  <a slot="actions" className="ds-button ds-button--primary" href="/download">Download</a>
</Header>

The adapter does not register the element: import 4-page/ds-header once in the browser entry. Sync 1 copies react/header.ts when a product names header in its components.

Footer · Document · Layout · Overlay