Header

The header stays at the top of every screen. It holds the main sections of a website, or the actions of WerkOS you need in any module.

Website and product

On a website, the header lists the main sections. Each one opens a panel with all of its pages, so any page is two clicks away.

At rest, 72 px high

After scrolling, 64 px of it in view, with the page showing through

In WerkOS, the rail on the left does the navigating. The header holds what a recruiter needs in any module, from Add task to Sign out.

Ask WerkAI

At rest

Ask WerkAI

Scrolled, with the project showing through the glass

When to use it

Give each screen one header, holding only the sections people choose between and the actions they need everywhere. Keep the sections in the same order on each page.

Actions for one page, such as Publish job, go in its toolbar. The blocks of a long page go in the side navigation.

Anatomy

On a website, from left to right: the logo, the sections, the theme switch and one primary button. In WerkOS the controls are round and flat, and the ask bar sits in the center.

Height at rest: 72 px; --header-h
Height after scrolling: 64 px; --header-h-condensed
Logo height: 30 px, 22 px below 400 px
Section button: 40 px high, 10 px padding, 6 px radius, 2 px apart; --radius-md
Section label: 14 px on 20 px, weight 500; --type-nav
Theme switch and menu button: 40 by 40 px
Primary button: Button, medium, 44 px; --brand-true
WerkOS bar: 52 px inside a 60 px band, bottom corners 24 px
WerkOS controls: 36 px, full radius, no border; --radius-full
WerkOS on a phone: 64 px plus the top safe area; --app-header-h

States

At the top of the page the header is opaque. Once the page scrolls under it, it turns to frosted glass and settles to its shorter height.

The section you are in has full ink and bold type. Each label keeps the width of its bold form, so nothing shifts from page to page.

At rest

Current

Open

On hover: Fill and full ink; --surface-control
Current: Full ink, weight 700; --text
Open: Fill held while its panel is open; --surface-control
Focus: 2 px ring, 2 px offset; --focus-ring

Section panel

A section button opens a panel under it that lists the pages of that section. A second press on the button opens the overview of the section.

Surface: White in light, the raised fill with its ring in dark; --surface-1, --glass-fill-raised
Radius: 16 px; --radius-2xl
Shadow: Level 3; --elevation-3
Padding: 8 px; --space-2
Row: 36 px, 44 px on a touch screen
Columns: One column up to seven pages, more as the list grows
Entrance: Fade and 6 px rise in 150 ms; --duration-fast
Height: Ends 96 px above the foot of the window, then scrolls

Behavior

The header condenses by moving, not by resizing, so the page under it holds still. In WerkOS on a desktop, scrolling down slides the header away and the first scroll up brings it back.

Below 1280 px, the sections and the primary button move behind a menu button, into a layer with its own scroll. Below 400 px the theme switch joins them.

Keyboard and screen readers

The header is the banner of the page, and its sections form a navigation landmark named Primary. The current section carries aria-current, and each section button says whether its panel is open.

Tab: Moves through the logo, the sections and the buttons
Enter or Space: Opens the panel and moves focus to its first link. On an open section, opens its overview
Left and Right: Move between section buttons, and one column inside a panel
Up and Down: Move through the links of the open panel
Home and End: Jump to the first or last link
Escape: Closes the panel and returns focus to its button

Permitted and not permitted

Permitted

Mark the current section with ink and weight
People who cannot tell colors apart still see where they are.
Open panels on click or key press
Touch screens have no hover, and hover panels open by accident.

Not permitted

Page actions in the header
Publish job belongs in the toolbar of the job it publishes.
A header that grows or shrinks in the page
Everything below it jumps. Move the bar instead.
Menu roles on navigation links
A screen reader then expects menu keys the links do not answer.

NextSide navigation

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

JSON

{
  "title": "Header",
  "path": "/components/header",
  "url": "https://design.werklist.com/components/header",
  "text": "https://design.werklist.com/agent/components/header",
  "summary": "The bar at the top of the screen: the main sections of a website, or the actions of WerkOS you need in any module.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Header",
  "purpose": "The bar at the top of each screen: the main sections of a website, or the actions of WerkOS needed in any module.",
  "use": [
    "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."
  ],
  "avoid": [
    "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": [
    {
      "part": "Bar, website",
      "measure": "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",
      "token": "--header-h, --header-h-condensed"
    },
    {
      "part": "Frame",
      "measure": "1440 px, centered, with 24 px of side padding, 32 px from 1024 px",
      "token": "--frame, --pad"
    },
    {
      "part": "Logo",
      "measure": "30 px high, 22 px below 400 px, flush left, links to the home page"
    },
    {
      "part": "Section button",
      "measure": "40 px high, padding 10 px, radius 6 px, 2 px apart, centered between the logo and the buttons",
      "token": "--type-nav, --radius-md"
    },
    {
      "part": "Theme switch",
      "measure": "IconButton medium, 40 by 40 px, named for the theme it switches to"
    },
    {
      "part": "Primary button",
      "measure": "Button primary medium, 44 px, the one action of the website, such as Hire workers, 8 px after the theme switch",
      "token": "--brand-true, --on-brand"
    },
    {
      "part": "Menu button",
      "measure": "40 by 40 px, below 1280 px"
    },
    {
      "part": "Section panel",
      "measure": "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",
      "token": "--surface-1, --glass-fill-raised, --glass-ring-raised, --radius-2xl, --elevation-3, --space-2, --duration-fast"
    },
    {
      "part": "Panel rows",
      "measure": "links of 36 px at 14 px, 44 px on a touch screen. Pages only. A section with groups is listed by name",
      "token": "--surface-control"
    },
    {
      "part": "Panel columns",
      "measure": "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"
    },
    {
      "part": "Menu panel",
      "measure": "a layer under the bar, as tall as the window below it, with its own scroll. Section rows at least 48 px",
      "token": "--bg"
    },
    {
      "part": "WerkOS desktop bar",
      "measure": "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",
      "token": "--radius-3xl"
    },
    {
      "part": "WerkOS Add task",
      "measure": "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",
      "token": "--brand-blue, --radius-full"
    },
    {
      "part": "WerkOS Request optimization",
      "measure": "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",
      "token": "--glass-fill-hover, --text-muted, --radius-full"
    },
    {
      "part": "WerkOS ask bar",
      "measure": "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",
      "token": "--surface-control, --text-muted, --radius-full"
    },
    {
      "part": "WerkOS icon buttons",
      "measure": "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",
      "token": "--text-muted, --border-rule"
    },
    {
      "part": "WerkOS counter",
      "measure": "Counter, attention tone, over the top end corner (6 px up, 4 px out), with a 2 px ring in the resting header fill",
      "token": "--badge-alert, --badge-alert-ink, --header-fill"
    },
    {
      "part": "WerkOS phone bar",
      "measure": "64 px at every scroll position, plus the top safe area",
      "token": "--app-header-h"
    }
  ],
  "variants": [
    {
      "name": "Website",
      "use": "Main sections with panels, theme switch, one primary button."
    },
    {
      "name": "WerkOS",
      "use": "An action bar beside the rail, which does the navigating."
    }
  ],
  "states": [
    {
      "name": "At rest",
      "change": "Opaque surface, no border, no shadow",
      "tokens": [
        "--bg",
        "--header-fill"
      ]
    },
    {
      "name": "Scrolled, website",
      "change": "The page color at 92 percent, blurred 10 px with saturation at 140 percent, 64 px in view",
      "tokens": [
        "--bg"
      ]
    },
    {
      "name": "Scrolled, WerkOS",
      "change": "Crossfades to navigation glass",
      "tokens": [
        "--glass-fill-nav",
        "--glass-blur-nav",
        "--glass-shadow-nav"
      ]
    },
    {
      "name": "Retracted, WerkOS desktop",
      "change": "Slides up out of view on scroll down and comes back on the first scroll up",
      "tokens": [
        "--app-sticky-top"
      ]
    },
    {
      "name": "Section at rest",
      "change": "Muted ink, weight 500",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Section hover",
      "change": "Fill and full ink, on devices that can hover",
      "tokens": [
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "Section current",
      "change": "Full ink, weight 700, aria-current true. Each label keeps the width of its bold form, so the row never shifts",
      "tokens": [
        "--text"
      ]
    },
    {
      "name": "Section open",
      "change": "Fill held, aria-expanded true",
      "tokens": [
        "--surface-control"
      ]
    },
    {
      "name": "Focus",
      "change": "2 px ring, 2 px offset",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    },
    {
      "name": "Reduced transparency or no backdrop filter",
      "change": "Scrolled surface stays opaque",
      "tokens": [
        "--bg",
        "--header-fill"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves through the skip link, the logo, the section buttons, the theme switch and the primary button"
    },
    {
      "key": "Enter or Space",
      "action": "Opens the section panel and focuses its first link. On the button of an open panel, opens the overview of the section"
    },
    {
      "key": "ArrowLeft, ArrowRight",
      "action": "Move between section buttons"
    },
    {
      "key": "ArrowUp, ArrowDown",
      "action": "Move through the links of the open panel. Inside a panel, ArrowLeft and ArrowRight move one column along the same row"
    },
    {
      "key": "Home, End",
      "action": "First or last link of the open panel"
    },
    {
      "key": "Escape",
      "action": "Closes the panel or the menu panel and returns focus to its button"
    },
    {
      "key": "Tab past the last link",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/header