Menubalk

Een navigatielandmark met een lijst van links, elk een primary knop; het huidige item heeft aria-current="page". Gewone links, geen script.

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	Toegestane waarden	Omschrijving
`label`	`string`	verplicht		De naam van de landmark (aria-label), in de taal van de pagina.
`items`	`array`	verplicht		De links: label, href, current (page, true of null), lang, hreflang, name, attributes per item.

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Toetsen	Doet
`Tab, Enter`	Gaat in documentvolgorde langs de items; Enter volgt er een. Native, geen script.

Toegankelijkheid

Een <nav aria-label>-landmark met een lijst; de huidige pagina is aria-current="page", vet en onderstreept, niet alleen een kleur.
Een item in een andere taal draagt lang en hreflang; een tekst die een code is krijgt via name de volledige naam als aria-label, want een code is geen naam.

Waarom zo

Het hoofdmenu van elke site is dit ene component, genoemd in de taal van de pagina, zodat een schermlezer één keer "Hoofdmenu" hoort en de Tab-volgorde de documentvolgorde is. De items zijn knoppen, zodat het menu niet kan afwijken van de ene vormgeving van een actie in de kit.

Verwijzingen

COMMON-148
philosophy 37

Gebruikt

Knop

Gebruikt door

Nog geen gebruik vastgelegd.

README

navbar

A navigation landmark (<nav aria-label>) with a list of items, each a primary button filling its cell; the current item has aria-current="page". Plain links, Tab order is document order, no script.

Tokens: the button's (--color-primary, --color-on-primary, the hover pair, --font-size-control).

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 language variant (the legacy EN NL switcher) went: a legacy-path site has the language picker like every other site with more than one language.
2026-10-14: new, from <nav class="main-menu"> and <nav class="language-switcher"> of header.php.