Site header

The banner: an image or colour in a band with the site name, the tools in the top right corner (share menu, language picker) and the main menu at the bottom.

Demo: Name for screen readers only

Property editor

Change a value and apply it; the demo renders with the new values. A refused value is reported at its field and the demo keeps the starting value.

Properties

Property	Type	Default	Description
`name`	`string`	required	The site name.
`showName`	`bool`	`true`	False: the name is only read by screen readers, for a header image that already shows it.
`tools`	`array`	none	Rendered components for the corner, in order (escaped HTML from the kit's own helpers).
`navigation`	`string`	none	The rendered main navbar (escaped HTML from dvlop_navbar()), or nothing.

Events

This component sends no events.

Keyboard

This component has no keyboard behaviour of its own.

Accessibility

A <header> landmark; on a page it is the banner.
The name is a <p>, visible or sr-only, never a heading: the page's h1 stays the only one.
The header image and colours are tokens (--header-*, --site-name-*); the markup holds no presentation.

Rationale

The header takes rendered components as props and places them; it writes none of their markup, so the navbar and the pickers have one home each. The site name is a paragraph, not a heading: every page has exactly one h1 and that is the page's. When a header image already shows the name, showName false keeps it for screen readers only. On a narrow screen the tools move above the name, so nothing overlaps at phone width or 200% zoom.

References

COMMON-148

Uses

This component uses no other component.

Used by

No usages recorded yet.

README

site-header

The banner: an image or colour in a 4:1 band with the site name, the tools in the top right corner (the share menu, the language picker) and the main menu at the bottom.

Tokens: --header-image, --header-position, --header-background, --header-ratio, --site-name-*.
On a narrow screen the tools move above the name, at the end.

Change log

2026-10-14: component.json (the manifest: the props now live there) and demo.php (the demos the inspector and the catalogue page show) added; see docs/architecture/inspector.md.
2026-10-14: the top slot went with the legacy EN NL switcher; a legacy-path site has the language picker in the tools corner like every other site with more than one language.
2026-10-14: new, from the skeleton part of htmlHeader() and the .site-header rules of base.css. The switcher now precedes the name in the DOM, as it does on screen.