# Header

The bar at the top of each screen: the main sections of a website, or the actions of WerkOS needed in any module.

* Kind: component
* Page: https://design.werklist.com/components/header
* Version: 2.1.2

## When to use it

* One per screen, at the top, on each page.
* On a website: the main sections, each opening a panel of its pages.
* In WerkOS: the actions needed in every module, such as Add task, Ask WerkAI, email, notifications and Sign out.

## When not to use it

* Actions that belong to one page: use that page's toolbar.
* The blocks of a long page: use side navigation.
* Panels that open on hover.
* Changing the header's height in the page flow.

## Anatomy

* Bar, website: 72 px at rest. After 80 px of scroll, 64 px stay in view: the bar moves up instead of shrinking, so the page holds still (--header-h, --header-h-condensed)
* Frame: 1440 px, centered, with 24 px of side padding, 32 px from 1024 px (--frame, --pad)
* Logo: 30 px high, 22 px below 400 px, flush left, links to the home page
* Section button: 40 px high, padding 10 px, radius 6 px, 2 px apart, centered between the logo and the buttons (--type-nav, --radius-md)
* Theme switch: IconButton medium, 40 by 40 px, named for the theme it switches to
* Primary button: Button primary medium, 44 px, the one action of the website, such as Hire workers, 8 px after the theme switch (--brand-true, --on-brand)
* Menu button: 40 by 40 px, below 1280 px
* Section panel: opens under its button and stays inside the frame. As wide as its list, radius 16 px, padding 8 px. White in light, the raised fill with its ring in dark. Enters with a fade and a 6 px rise in 150 ms (--surface-1, --glass-fill-raised, --glass-ring-raised, --radius-2xl, --elevation-3, --space-2, --duration-fast)
* Panel rows: links of 36 px at 14 px, 44 px on a touch screen. Pages only. A section with groups is listed by name (--surface-control)
* Panel columns: one column up to 7 pages, two up to 14, three up to 24, four up to 36, then five. The panel ends 96 px above the foot of the window and then scrolls
* Menu panel: a layer under the bar, as tall as the window below it, with its own scroll. Section rows at least 48 px (--bg)
* WerkOS desktop bar: from 1024 px, a 52 px bar in a 60 px band, 6 px in on the left, 8 px on the right and below. Square top corners, 24 px bottom corners (--radius-3xl)
* WerkOS Add task: 36 px, full radius, no fill, 1 px inset edge in brand blue, label 13 px weight 700 in brand blue, padding 10 px left and 14 px right, 16 px tasks glyph, gap 6 px (--brand-blue, --radius-full)
* WerkOS Request optimization: 36 px, full radius, glass hover wash at rest, label 14 px weight 500 in muted ink, padding 12 px, 16 px cog glyph, gap 6 px (--glass-fill-hover, --text-muted, --radius-full)
* WerkOS ask bar: 36 px, full radius, control fill with no ring, padding 16 px, gap 10 px. A 17 px sparkle stroked with a blue gradient, then Ask WerkAI at 14 px, weight 500, in muted ink. Centered on the header, 132 px to 600 px wide, with 304 px kept free on each side (--surface-control, --text-muted, --radius-full)
* WerkOS icon buttons: 36 by 36 px, full radius, muted ink, 2 px apart, glyphs 17 px to 19 px. A 1 px rule 20 px high stands before Sign out (--text-muted, --border-rule)
* WerkOS counter: Counter, attention tone, over the top end corner (6 px up, 4 px out), with a 2 px ring in the resting header fill (--badge-alert, --badge-alert-ink, --header-fill)
* WerkOS phone bar: 64 px at every scroll position, plus the top safe area (--app-header-h)

## Variants

* Website: Main sections with panels, theme switch, one primary button.
* WerkOS: An action bar beside the rail, which does the navigating.

## States

* At rest: Opaque surface, no border, no shadow (--bg, --header-fill)
* Scrolled, website: The page color at 92 percent, blurred 10 px with saturation at 140 percent, 64 px in view (--bg)
* Scrolled, WerkOS: Crossfades to navigation glass (--glass-fill-nav, --glass-blur-nav, --glass-shadow-nav)
* Retracted, WerkOS desktop: Slides up out of view on scroll down and comes back on the first scroll up (--app-sticky-top)
* Section at rest: Muted ink, weight 500 (--text-muted)
* Section hover: Fill and full ink, on devices that can hover (--surface-control, --text)
* Section current: Full ink, weight 700, aria-current true. Each label keeps the width of its bold form, so the row never shifts (--text)
* Section open: Fill held, aria-expanded true (--surface-control)
* Focus: 2 px ring, 2 px offset (--focus-ring, --focus-ring-width, --focus-ring-offset)
* Reduced transparency or no backdrop filter: Scrolled surface stays opaque (--bg, --header-fill)

## Keyboard

* Tab: Moves through the skip link, the logo, the section buttons, the theme switch and the primary button
* Enter or Space: Opens the section panel and focuses its first link. On the button of an open panel, opens the overview of the section
* ArrowLeft, ArrowRight: Move between section buttons
* ArrowUp, ArrowDown: Move through the links of the open panel. Inside a panel, ArrowLeft and ArrowRight move one column along the same row
* Home, End: First or last link of the open panel
* Escape: Closes the panel or the menu panel and returns focus to its button
* Tab past the last link: Closes the panel and moves on

## Accessibility

* One header element per page, the banner landmark.
* Section buttons inside nav aria-label Primary, each with aria-expanded and aria-controls.
* Current section: aria-current true (the item is a button, not the page link).
* A panel is a list of links, with no menu or menuitem roles.
* Menu panel: role dialog, aria-modal and a name. Focus stays inside it, the page behind does not scroll, and focus returns to the menu button on close.
* Skip to content is the first focusable element.
* Section labels meet 4.5 to 1 on the page color and the focus ring meets 3 to 1, in both themes.
* Without script each section button is a link to its overview page.
* Forced colors: the current section keeps weight 700, and focus is an outline.

## Content

* Section labels are short nouns in sentence case, one word where possible: Employers, Candidates, Jobs, About.
* A panel lists pages only. A second press on the button of an open panel opens the overview of the section, and the home page links to every overview.
* Theme switch names are Switch to the dark theme and Switch to the light theme.
* Menu button names are Open menu and Close menu.

## Tokens

* --header-h
* --header-h-condensed
* --frame
* --pad
* --type-nav
* --radius-md
* --brand-true
* --on-brand
* --surface-1
* --glass-fill-raised
* --glass-ring-raised
* --radius-2xl
* --elevation-3
* --space-2
* --duration-fast
* --surface-control
* --bg
* --radius-3xl
* --brand-blue
* --radius-full
* --glass-fill-hover
* --text
* --text-muted
* --border-rule
* --badge-alert
* --badge-alert-ink
* --header-fill
* --app-header-h
* --glass-fill-nav
* --glass-blur-nav
* --glass-shadow-nav
* --app-sticky-top
* --focus-ring
* --focus-ring-width
* --focus-ring-offset