Navigation

`<kern-language-select>`

Language switcher: a dropdown with the language names («Deutsch», «English») or short codes («DE», «EN»), optionally with flags, or the languages side by side as links or buttons (variant="inline", good for two or three). Names are shown in their own language and marked with lang; codes are announced with the full name.

Languages come from languages (de,en,fr) or from child <option> elements, which may set their own name and flag: <option value="de-CH" data-flag="ch">Schweizerdeutsch</option>. With href (/{locale}/) every language is a real link. kernChange reports the choice; preventDefault() on it stops the navigation, so an app router can take over.

Examples

Dropdown

languages lists the codes; each language is shown by its own name («Deutsch», «Français»), marked with lang, so screen readers pronounce it correctly. kernChange reports { value }.

Choose a language.

<kern-language-select value="de" languages="de,en,fr,it"></kern-language-select> <p class="out" style="margin:12px 0 0;font-size:13px;color:var(--text-muted)">Choose a language.</p>

root.addEventListener('kernChange', (e) => { root.querySelector('.out').textContent = 'kernChange → ' + JSON.stringify(e.detail); });

Codes and flags

display="code" shows «DE», «EN»; screen readers still hear the full name. flags puts a flag in front: from the region of the code (de-CH → Switzerland), else the usual country of the language (en → United Kingdom). A flag names a country, not a language, so the name or code always stays next to it. When two entries share a language, the code includes the region.

Own names and flags

Child <option> elements replace languages and may set their own name (the text) or flag (data-flag), e.g. for a dialect Intl does not name well.

<kern-language-select value="gsw" flags> <option value="gsw" data-flag="ch">Schwiizerdütsch</option> <option value="de">Deutsch</option> <option value="en-US">English (US)</option> </kern-language-select>

Side by side

variant="inline" lists the languages next to each other, the current one bold and not clickable. Good for two or three languages, e.g. in a footer or the topbar. With href every language is a real link ({locale} is replaced), with hreflang; without it they are buttons.

Switching the language

The switcher only reports the choice; the app changes its language and Kern's with setKernLocale() (or by setting <html lang>, which Kern follows). With href, preventDefault() on kernChange keeps the page so an app router can navigate instead; Ctrl/Cmd click on a link still opens a new tab.

<kern-language-select variant="inline" value="en" languages="en,de"></kern-language-select> <div style="margin-top:12px"><kern-pagination total="380"></kern-pagination></div>

const { setKernLocale } = await import('../kern/index.esm.js'); root.querySelector('kern-language-select').addEventListener('kernChange', (e) => setKernLocale(e.detail.value));

<kern-language-select [value]="lang" languages="de,en" href="/{locale}/devices" (kernChange)="onLanguage($event)"></kern-language-select> onLanguage(e: CustomEvent<{ value: string; href?: string }>) { e.preventDefault(); // the router navigates instead of a page load this.translate.use(e.detail.value); setKernLocale(e.detail.value); this.router.navigateByUrl(e.detail.href!); }

Properties

disabled

reflects

default false

boolean

displaydefault 'name'

"code" | "name"

name shows «Deutsch», code shows «DE».

flagsdefault false

boolean

A flag before each language. A flag names a country, not a language: keep the name or code next to it.

href

string | undefined

Link per language; {locale} is replaced by the code, e.g. /{locale}/.

labeldefault Language · de Sprache

string | undefined

Accessible name of the switcher.

languagesdefault ''

string | string[]

Available languages, e.g. de,en,fr; child <option> elements win.

size

reflects

default 'md'

"md" | "sm"

value

mutable

default ''

string

Current language (BCP 47), e.g. de or de-CH.

variant

reflects

default 'dropdown'

"dropdown" | "inline"

dropdown, or inline for the languages side by side.

Events

kernChange

CustomEvent<{ value: string; href?: string | undefined; }>

A language was chosen. With href, preventDefault() keeps the page (e.g. to route in the app).

Slots

(default)

<option> elements (read, not shown)

CSS parts

active

The current language in the inline variant

item

Each language in the inline variant