Kern 0.12.0 GitHub
Layout

<kern-topbar>

App header: brand on the left, main navigation, tools on the right (site switch, server status, kern-theme-toggle). Put each nav link directly into the nav slot; the active one gets aria-current="page" or class active (e.g. Angular routerLinkActive="active").

menu adds a menu button before the brand that emits kernMenu, e.g. to open a side navigation on small screens; kern-app-shell sets it itself.

Examples

App header

Brand on the left, the main navigation in the nav slot and tools in the end slot. Mark the current link with aria-current="page"; keep the navigation to at most six links.

Scan Inventory Templates Log Server connected
<kern-topbar app-name="Shelly Manager" suite="Homelab"> <a slot="nav" href="#">Scan</a> <a slot="nav" href="#" aria-current="page">Inventory</a> <a slot="nav" href="#">Templates</a> <a slot="nav" href="#">Log</a> <kern-status slot="end" tone="ok">Server connected</kern-status> <kern-theme-toggle slot="end" small label-light="Switch to light theme" label-dark="Switch to dark theme"></kern-theme-toggle> </kern-topbar>

Custom brand and site switch

The brand slot replaces the default mark and app name. A small kern-select in the end slot switches between sites, a kern-language-select between languages.

Haus Seeblick Devices Rooms 2 updates
<kern-topbar home-href="#"> <a slot="brand" href="#" style="display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:600"> <kern-icon name="home"></kern-icon> Haus Seeblick </a> <a slot="nav" href="#" aria-current="page">Devices</a> <a slot="nav" href="#">Rooms</a> <kern-select slot="end" size="sm" aria-label-text="Choose site" style="width:180px"> <option value="1">Haus Seeblick</option> <option value="2">Holiday flat</option> <option value="3">Office Bern</option> </kern-select> <kern-language-select slot="end" size="sm" value="de" languages="de,en,fr" display="code" flags></kern-language-select> <kern-status slot="end" tone="warn">2 updates</kern-status> </kern-topbar>

Properties

appNameattribute app-name
string | undefined
homeHrefattribute home-href · default '/'
string

Link of the brand.

labelMenuattribute label-menu · default Menu · de Menü
string | undefined

Accessible name of the menu button.

menureflectsdefault false
boolean

Shows a menu button before the brand.

menuExpandedattribute menu-expanded · default false
boolean

Whether the menu the button opens is open (aria-expanded).

navLabelattribute nav-label · default Main navigation · de Hauptnavigation
string | undefined

Accessible name of the navigation.

suite
string | undefined

Muted product family before the app name, e.g. "Homelab".

Events

kernMenu
CustomEvent<{ expanded: boolean; }>

The menu button was clicked.

Slots

brand

Replaces the default brand (mark + app-name)

end

Tools, right-aligned

nav

<a> elements of the main navigation (at most six)

CSS parts

bar

The header bar

menu

The menu button