EN

Partial Component

Language Switcher

This component manages language preference only. For a full internationalization implementation, see Building Multi-Language Sites.

The Language Switcher partial provides a dropdown menu for selecting a language preference. It stores the selected language in localStorage and sets the lang attribute on the <html> element.

Manifest

{
  "name": "language-switcher",
  "type": "partial",
  "styles": ["language-switcher.css"],
  "scripts": ["language-switcher.js"],
  "requires": ["icon"]
}

Example

Click the globe icon in the header navigation to see the language switcher in action.

Configuration

Languages are configured in lib/data/languages.json:

{
  "defaultLang": "en",
  "fallbackUrl": "/404/",
  "available": [
    { "code": "en", "label": "English" },
    { "code": "de", "label": "Deutsch" },
    { "code": "es", "label": "Espanol" },
    { "code": "fr", "label": "Francais" }
  ]
}

Configuration options:

  • defaultLang - The default language code (pages at root, no URL prefix)
  • fallbackUrl - Where to navigate when a localized page doesn't exist
  • available - Array of language objects with code (ISO 639-1) and label (display name)

Usage in Templates

{% from "components/_partials/language-switcher/language-switcher.njk" import languageSwitcher %}

{{ languageSwitcher(data.languages.available, data.languages.defaultLang, data.languages.fallbackUrl) }}

Features

  • Dropdown language selector with globe icon
  • Stores preference in localStorage under language key
  • Sets lang attribute on <html> element
  • Persists across page loads and sessions
  • Keyboard accessible (Escape to close)
  • Click outside to close dropdown
  • Dark theme compatible
  • SWUP page transitions compatible