LocalesMenuButton

Also known as the "language switcher", it displays a menu allowing users to select the language of the interface.

Installation

pnpm dlx shadcn@latest add @shadmin/locales-menu-button

It leverages the store so that their selection is persisted.

Usage

For most users, this component will be automatically added to the header of shadmin's default <Layout> if the i18nProvider.getLocales() method returns more than one locale. Check the i18nProvider setup documentation for details.

If you use the ra-i18n-polyglot package, you can pass the list of available locales as the third parameter of polyglotI18nProvider:

// in src/App.js
import polyglotI18nProvider from "ra-i18n-polyglot";
import englishMessages from "ra-language-english";
import frenchMessages from "ra-language-french";
import { Admin } from "@/components/admin";
import { Resource } from "ra-core";
 
const availableLocales = [
  { locale: "en", name: "English" },
  { locale: "fr", name: "Français" },
];
const i18nProvider = polyglotI18nProvider(
  (locale) => (locale === "fr" ? frenchMessages : englishMessages),
  "en", // Default locale
  availableLocales,
);
 
const App = () => (
  <Admin i18nProvider={i18nProvider} dataProvider={dataProvider}>
    ...
  </Admin>
);

For custom layouts, or to put the language switcher in a settings menu, simply render the component without props:

import { LocalesMenuButton } from "@/components/admin";
 
<LocalesMenuButton />;

If you want to customize the button, you can edit the @/components/admin/locales-menu-button.tsx file directly. It leverages the useLocaleState hook from ra-core, as well as the <Dropdown> component from shadcn/ui.

Props

Prop	Required	Type	Default	Description
`icon`	Optional	`ReactNode`	-	Replaces the locale-code text in the trigger button
`languages`	Optional	`Array<{locale: string; name: string}>`	from `useLocales()`	Override the list of available languages
`ref`	Optional	`Ref<HTMLButtonElement>`	-	Forwarded to the underlying `<Button>`

`icon`

Replaces the default locale-code text (e.g. "EN") shown in the trigger button. Pass any lucide-react icon to convey a different action.

`ref`

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
import { LocalesMenuButton } from "@/components/admin";
 
const MyHeader = () => {
  const ref = useRef<HTMLButtonElement>(null);
  return <LocalesMenuButton ref={ref} />;
};

import { Globe } from "lucide-react";
import { LocalesMenuButton } from "@/components/admin";
 
<LocalesMenuButton icon={<Globe className="size-4" />} />;