SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<details class="relative"
         data-controller="disclosure"
         data-action="keydown.esc@window->disclosure#closeOnEscape click@window->disclosure#closeOnOutside turbo:before-cache@window->disclosure#close">
  <summary class="flex h-9 min-w-9 cursor-pointer list-none items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium text-ink-faint transition-colors hover:text-ink [&::-webkit-details-marker]:hidden" title="Language — current: English">
    <svg viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
         class="size-5 shrink-0"
         aria-hidden="true">
      <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z" /><path d="M3.6 9h16.8" /><path d="M3.6 15h16.8" /><path d="M12 3a13.5 13.5 0 0 0 0 18" /><path d="M12 3a13.5 13.5 0 0 1 0 18" />
    </svg>
    <span aria-hidden="true"
          class="whitespace-nowrap">English</span>
    <span class="sr-only">Language — current: English</span>
  </summary>
  <ul class="absolute right-0 top-full z-50 mt-2 min-w-45 rounded-lg border border-line bg-surface p-1 shadow-lg" data-action="click->disclosure#closeOnSelect">
    <li>
      <a href="/lookbook/inspect/chrome/locale_switcher/playground"
           lang="en"
           hreflang="en"
           class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm bg-nav-active font-medium text-nav-active-ink"
           aria-current="true">
        English
      </a>
    </li>
    <li>
      <a href="/es/lookbook/inspect/chrome/locale_switcher/playground"
           lang="es"
           hreflang="es"
           class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink"
           >
        Español
      </a>
    </li>
    <li>
      <a href="/pt-BR/lookbook/inspect/chrome/locale_switcher/playground"
           lang="pt-BR"
           hreflang="pt-BR"
           class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink"
           >
        Português (Brasil)
      </a>
    </li>
    <li>
      <a href="/ja/lookbook/inspect/chrome/locale_switcher/playground"
           lang="ja"
           hreflang="ja"
           class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink"
           >
        日本語
      </a>
    </li>
  </ul>
</details>
1
render LocaleSwitcherComponent.new

A native

disclosure with one plain link per declared locale and no JavaScript. The links are real: each one is the current page under another locale's prefix, so following one from the preview leaves the preview — the component reads the request rather than being told a page.

The active option is the request's locale, which inside Lookbook is always the default; the localized states are exercised where a localized request exists, in the integration suite.

No params configured.