Skip to content

SiteHeader

The public pages’ top bar: wordmark, a few links, and Sign in / Create account or Open dashboard.

LayoutServer-rendered

Examples

Signed out

Under 768px the links fold into a native popover opened by the menu button (no JavaScript).

Switchboard
Sign inCreate account
Example
<SiteHeader
  nav={[{ label: 'How it works', href: '#how' }, { label: 'Docs', href: docsHref }]}
  signInHref={routes.auth.signin.href()}
  signUpHref={routes.auth.signup.href()}
  dashboardHref={routes.dashboard.index.href()}
/>

Signed in

Switchboard
Open dashboard
Example
<SiteHeader signedIn signInHref={…} signUpHref={…} dashboardHref={routes.dashboard.index.href()} />

Usage

Usage
import { SiteHeader } from '@switchboard/ui'

<SiteHeader nav={nav} signedIn={Boolean(user)} signInHref={…} signUpHref={…} dashboardHref={…} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

SiteHeader

SiteHeader props
PropTypeDefaultDescription
signInHref*string–Sign in link (signed out).
signUpHref*string–Create account link (signed out).
dashboardHref*string–Open dashboard link (signed in).
signedInboolean–Swap the auth links for Open dashboard.
nav{ label; href; current? }[]–A few page links; current sets aria-current.
homeHrefstring'/'Where the wordmark links.
backdropbooleanfalseA faint jack field behind the column (auth and OAuth pages).

Also accepts every <header> attribute.

Accessibility

  • Renders <header> with <nav aria-label="Site">.
  • On phones the nav is a native popover: Escape and outside clicks close it, and it works before hydration.

Guidance

Do

  • Keep three or four links at most.

Don’t

  • Use it inside the dashboard (AppHeader is that).