patterns

LanguageMenuItems

Language submenu for `<UserMenu>`. Caller supplies the list of supported locales (BCP-47 + native label), the current value, and a setter.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/language-menu-items.json

Or import from the workspace package:

import { LanguageMenuItems, LocaleOption } from "@8maverik8/design";

Examples

Inside UserMenu

Click the avatar to open the menu and hover over Language.

Click the avatar to open the user menu and hover over Language.

current → en

<UserMenu user={user} onSignOut={signOut}>
  <LanguageMenuItems
    value={locale}
    onChange={setLocale}
    options={[
      { value: "en", label: "English" },
      { value: "ru", label: "Русский" },
    ]}
  />
</UserMenu>

Guidelines

Use native-name labels ("English", "Русский", "Português").Users find their language quickest in their own script, regardless of current UI locale.
Hardcode the locale list inside this component.Languages are owned by the i18n config of the host app, not the design system.