Navbar

A navigation landmark with a list of links, each a primary button; the current item has aria-current="page". Plain links, no script.

Demo: A menu of languages

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	Allowed values	Description
`label`	`string`	required		The landmark's name (aria-label), in the page's language.
`items`	`array`	required		The links: label, href, current (page, true or null), lang, hreflang, name, attributes per item.

Events

This component sends no events.

Keyboard

Keys	Does
`Tab, Enter`	Moves between the items in document order; Enter follows one. Native, no script.

Accessibility

A <nav aria-label> landmark with a list; the current page is aria-current="page", bold and underlined, not only a colour.
An item in another language carries lang and hreflang; a label that is a code gets its full name as aria-label through name, since a code is not a name.

Rationale

The main menu of every site is this one component, named in the page's language, so a screen reader hears "Main menu" once and the Tab order is the document order. The items are buttons, so the menu cannot drift from the kit's one look for an action.

References

COMMON-148
philosophy 37

Uses

Button

Used by

No usages recorded yet.

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.