Language Switcher — wd-language-switcher

Category: Navigation · Tag: wd-language-switcherBack to: Components overview

---

What it does

Lets visitors switch the site language. It reads the page's per-language URLs and the current language, and renders either a dropdown (<select>) or a list of language links. Selecting a language navigates to that language's version of the page. Language names are shown in their own script (English, العربية, Français, Español, Deutsch).

---

Adding it & its settings

Add Component → Navigation → Language Switcher.

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings:

Setting	Values	Effect
Choose Appearance (template)	Dropdown / List	Dropdown renders a <select>; List renders a horizontal list of links.

The available languages and their URLs come from the page automatically — nothing to configure here beyond the appearance.

---

Content & slots

• No slot — the languages are generated from page data (hrefLang), not from child content.

---

Styling

The variable set is grouped by the wrapper, the List appearance (ul + links), and the Dropdown appearance (select).

Container

Variable	Default
--language-switcher-display	flex
--language-switcher-width / -min-width / -max-width	auto
--language-switcher-height	auto
--language-switcher-background	transparent
--language-switcher-font-family	sans-serif
--language-switcher-border-top / -right / -bottom / -left	none
--language-switcher-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius	0
--language-switcher-margin-top / -bottom / -inline-start / -inline-end	0
--language-switcher-padding-top / -bottom / -inline-start / -inline-end	0

List appearance — the ul

Variable	Default
--language-switcher-ul-display	flex
--language-switcher-ul-gap	0.5rem
--language-switcher-ul-style	none
--language-switcher-ul-margin-top / -bottom / -inline-start / -inline-end	0
--language-switcher-ul-padding-top / -bottom / -inline-start / -inline-end	0

List appearance — each language link

Variable	Default
--language-switcher-link-color	#333
--language-switcher-link-background	transparent
--language-switcher-link-hover-background	#f0f0f0
--language-switcher-link-hover-color	#000
--language-switcher-link-display	flex
--language-switcher-link-align-items	center
--language-switcher-link-justify-content	center
--language-switcher-link-text-align	center
--language-switcher-link-text-decoration	none
--language-switcher-link-transition	all ease 0.3s
--language-switcher-link-width / -height	auto
--language-switcher-link-min-height	2rem
--language-switcher-link-font-size	0.875rem
--language-switcher-link-border-top / -right / -bottom / -left	none
--language-switcher-link-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius	4px
--language-switcher-link-margin-top / -bottom / -inline-start / -inline-end	0
--language-switcher-link-padding-top / -bottom	0.5em
--language-switcher-link-padding-inline-start / -inline-end	1em

List appearance — the active language link

Variable	Default
--language-switcher-link-active-color	#000
--language-switcher-link-active-background	transparent
--language-switcher-link-active-border-top / -right / -bottom / -left	none

Dropdown appearance — the select

Variable	Default
--language-switcher-select-background	#fff
--language-switcher-select-color	#333
--language-switcher-select-font-size	0.875rem
--language-switcher-select-border-top / -right / -bottom / -left	1px solid #ccc
--language-switcher-select-border-radius	4px
--language-switcher-select-width / -height	auto
--language-switcher-select-min-height	2rem
--language-switcher-select-padding-top / -bottom / -inline-start / -inline-end	0.5em

::part()

Part	Element
language-switcher-<id>	The switcher wrapper.

wd-language-switcher::part(language-switcher-main) { --language-switcher-link-color: #0ea5b7; }

---

Notes

• Appearance drives which variables apply: the ul/link groups take effect in List mode; the select group in Dropdown mode.
• The current language is highlighted (its link gets the link-active-* styles in list mode / is preselected in the dropdown).