component 3 varianten

LanguageSwitcher

Taalwisselaar voor NL/EN meertalige sites. Drie varianten: inline tekst, dropdown met vlag of tab-interface. Puur HTML, geen JavaScript vereist. Genereert correcte hreflang-links.

currentLang: 'nl' | 'en' variant?: 'inline' | 'dropdown' | 'tabs' style?: 'light' | 'dark' currentPath?: string

Inline

Compactste variant. Twee letterafkortingen gescheiden door een streepje. Ideaal naast een CTA-knop in de navigatie.

NL actief: light

EN actief: light

NL actief: dark

EN actief: dark

<LanguageSwitcher
  currentLang="nl"
  currentPath="/over-ons"
  variant="inline"
  style="light"
/>

Dropdown

Dropdown met vlag emoji en volledige taalbenaming. Opent via een native <details>-element, geen JavaScript. Geschikt voor navigaties met meer ruimte in de rechterhoek.

NL actief: light

EN actief: light

NL actief: dark

EN actief: dark

<LanguageSwitcher
  currentLang="nl"
  currentPath="/over-ons"
  variant="dropdown"
  style="light"
/>

Tabs

Tab-interface met subtiele achtergrond. Geschikt voor gebruik op een pagina zelf (bijv. bovenaan een contentblok) in plaats van in de navigatie.

NL actief: light

EN actief: light

NL actief: dark

EN actief: dark

<LanguageSwitcher
  currentLang="nl"
  currentPath="/over-ons"
  variant="tabs"
  style="light"
/>

Gebruik in navigatie

Via de showLangSwitch-prop van de Navigation-component verschijnt de taalwisselaar automatisch na de CTA-knop. Standaardvariant is inline.

<Navigation
  navItems={site.main_nav}
  siteTitle={site.title}
  showLangSwitch={true}
  currentLang="nl"
  langSwitchVariant="inline"
/>

hreflang in BaseLayout

Geef alternateUrls mee aan BaseLayout om correcte hreflang-tags in de <head> te genereren.

<BaseLayout
  title="Over ons"
  site={site}
  lang="nl"
  alternateUrls={{
    nl: '/over-ons',
    en: '/en/about',
  }}
>
  ...
</BaseLayout>