Sitekop

De banner: een afbeelding of kleur in een band met de sitenaam, de hulpmiddelen rechtsboven (deelmenu, taalkiezer) en het hoofdmenu onderaan.

Demo

Eigenschappen bewerken

Wijzig een waarde en pas die toe; de demo wordt met de nieuwe waarden getoond. Een geweigerde waarde wordt bij het veld gemeld en de demo houdt de beginwaarde.

Eigenschappen

Eigenschap	Type	Standaard	Omschrijving
`name`	`string`	verplicht	De sitenaam.
`showName`	`bool`	`true`	Onwaar: de naam wordt alleen door schermlezers gelezen, voor een kopafbeelding die hem al toont.
`tools`	`array`	geen	Gerenderde componenten voor de hoek, in volgorde (ontsnapte HTML van de helpers van de kit).
`navigation`	`string`	geen	De gerenderde hoofdmenubalk (ontsnapte HTML van dvlop_navbar()), of niets.

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Dit component heeft geen eigen toetsenbordgedrag.

Toegankelijkheid

Een <header>-landmark; op een pagina is het de banner.
De naam is een <p>, zichtbaar of sr-only, nooit een kop: de h1 van de pagina blijft de enige.
De kopafbeelding en kleuren zijn tokens (--header-*, --site-name-*); de opmaak bevat geen presentatie.

Waarom zo

De kop neemt gerenderde componenten als eigenschappen en plaatst ze; hij schrijft niets van hun opmaak, zodat de menubalk en de kiezers elk één thuis hebben. De sitenaam is een alinea, geen kop: elke pagina heeft precies één h1 en dat is die van de pagina. Toont een kopafbeelding de naam al, dan houdt showName false hem alleen voor schermlezers. Op een smal scherm gaan de hulpmiddelen boven de naam, zodat niets overlapt op telefoonbreedte of 200% zoom.

Verwijzingen

COMMON-148

Gebruikt

Dit component gebruikt geen ander component.

Gebruikt door

Nog geen gebruik vastgelegd.

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.