4.1 – Form and labels

options:
  switcher:
    style: dropdown
    label: native
    showCurrent: true
    separator: "|"

Three shapes

style	What it is	What for
links	text links side by side, parted by separator	two, at most three languages
dropdown	a details element to open	many languages, or little room
flags	the flag field per language, native name as a tooltip	when room is tight and the languages are known

dropdown works without JavaScript — it is a details. The plugin’s script additionally closes it on a click outside and on Escape; without the script, opening still works.

The switcher at the top right of this site is a dropdown with label: native.

Flags are countries, not languages

A country can have several languages, a language several countries. Which flag stands for English? Anyone choosing flags should know the choice always passes somebody over. The default derives the flag from the locale’s region (de-DE → 🇩🇪); the flag field overrides any of them, with text if you like.

Four labels

label	Shows	Example
code	the language code	de
label	the display name	German
native	the name in the language itself	Deutsch
translatedTitle	the title of the target page	Kaffee

native is usually the friendliest choice: someone looking for German is looking for “Deutsch”, not “German”.

translatedTitle is the most interesting — it shows where the click leads, not just into which language. It needs a link that knows the title; without a translation it falls back to the native name.

The current language

showCurrent: true shows it as a highlighted entry without a link, carrying aria-current="page". With false only the others appear — shorter, but the visitor no longer sees where they are.

Where it belongs

layout:
  position: header
  group: toolbar

Next to the search and the colour-scheme button, where visitors look for such switches. Any other place works too — the values are the same as for any Quartz component.

On a monolingual site, and on pages with no further entries, it renders nothing. So no condition is needed around it.