LocaleSwitcherList

LocaleSwitcher as a plain list, for a drill-down panel in a mobile menu. No client boundary, so with hrefs every language's link is in the server HTML, where the dropdown renders its entries only once opened.

import { LocaleSwitcherList } from "@evolve-storefront/layout/locale-switcher-list";

Preview

DefaultOpen in Storybook ↗

Usage

Every entry links straight away; the current language is marked.

<LocaleSwitcherList
  locales={routing.locales}
  locale={locale}
  href={`/${locale}`}
  hrefs={createAlternates({ routing, paths, locale }).languages}
/>;

Props

Prop	Type	Description
locales	readonly string[]	The locales offered, in order. A language offered in several regions gets one entry.
locale	string	The one being read now.
href	string	Where switching leads, normally the current path. Required: a route's counterpart is a fact about the route, and a default would send every shopper home.
hrefs?	Partial<Record<string, string>>	This page's counterpart per locale, computed on the server — createAlternates(…).languages from @evolve-storefront/core/seo — so every entry has its real address from the first render. A locale without one uses href.
pickLocale?	LocalePicker	Which of a language's locales its entry switches to. Defaults to sameRegionOrFirst: the shopper's own region if it has the language.
renderLink?	((props: LocaleLinkRenderProps) => ReactNode)	Render an entry with the app's router; a plain <a href> without it. With next-intl that is its own Link, whose locale prop does the switching: next/link has no locale in the App Router.

Any other props go to the root element, like on a plain HTML element.