SiteHeader

structure · static (no JavaScript) · no children. All components: component playground.

Description for the model

Top navigation bar with the brand, up to six links and one call to action. Collapses to a menu on phones.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "SiteHeader",
  "props": {
    "brand": "Coffee Atlas",
    "tagline": "Courses for home brewers",
    "mark": "wordmark",
    "links": [
      {
        "label": "Courses",
        "href": "/courses"
      },
      {
        "label": "About",
        "href": "/about"
      }
    ],
    "cta": {
      "label": "Start free",
      "href": "/signup"
    },
    "signIn": {
      "label": "Sign in",
      "href": "/login"
    }
  }
}

Props

Prop	Type	Required	Notes
brand	string	yes	Brand name. max length 60
tagline	string		Small line under the brand. max length 60
mark	"wordmark" | "terminal" | "rocket" | "orbit" | "compass" | "sigma" | "logo"		Brand mark style; logo = the ulams mark. default "wordmark"
links	array of objects		Navigation links. max 6 items
links[].label	string	yes	Visible text. max length 80
links[].href	string (href)	yes	Target URL. max length 2048
cta	object		A link or call to action
cta.label	string	yes	Visible text. max length 80
cta.href	string (href)	yes	Target URL. max length 2048
signIn	object		A link or call to action
signIn.label	string	yes	Visible text. max length 80
signIn.href	string (href)	yes	Target URL. max length 2048
homeHref	string (href)		Where the brand links to; the language home on a translated landing. max length 2048
languages	array of objects		Language switcher: one entry per language, in display order; the current one is marked. max 4 items
languages[].code	string	yes	Language code of the page it links to (BCP 47). max length 10
languages[].label	string	yes	Name of the language in that language, e.g. PL or 中文. max length 20
languages[].href	string (href)	yes	URL of the page in that language. max length 2048
languages[].current	boolean		True for the language of this page. default false

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Coffee Atlas

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "brand": "Coffee Atlas",
  "links": [
    {
      "label": "Bad",
      "href": "javascript:alert(1)"
    }
  ]
}

Issues:

• /links/0/href unsafe or empty link

Rendered as:

Coffee Atlas

Accessibility

axe-core: 16 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.