A plain dropdown language switcher.

Technical Details

  • You can open the dropdown upward by using the .lang-switcher--upward modifier. It's a good option to display the lang switcher at the bottom of your footer.
  • It uses Alpine.js to manage the interaction and states.
  • The language switcher is designed with accessibility in mind. It can be closed using the esc key, providing a familiar interaction for users. Additionally, it traps the cursor, ensuring that users stay within the switcher until they make a selection.
  • You should set the hreflang and aria-label properly.