Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Language Selector Dropdown Menu for Vue

A language picker with a flag beside each language's own name and a check on the current one.

UI library: Ark UI

The button always reads Language. The menu checks one language, starting at English, with a flag beside each language's own name.

Use it when the locale is a single choice people set rarely. If the current name should show while closed, put it on the button or use a Select. In Vue, Ark UI stores the code and does not translate the page.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button variant="outline">
      <LanguagesIcon aria-hidden="true" data-icon="inline-start" />Language
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuRadioGroup @value-change="handleLanguageChange" :value="language">
      <DropdownMenuLabel>Select Language</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuRadioItem value="en">
        <span class="flex items-center gap-2">
          <span aria-hidden="true">🇺🇸</span>
          <span>English</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="es">
        <span class="flex items-center gap-2">
          <span aria-hidden="true">🇪🇸</span>
          <span>Español</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="fr">
        <span class="flex items-center gap-2">
          <span aria-hidden="true">🇫🇷</span>
          <span>Français</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="de">
        <span class="flex items-center gap-2">
          <span aria-hidden="true">🇩🇪</span>
<!-- The rest of the file is under Installation. -->

FAQ

How is the language stored?

As one code, en to start, in a radio group: en, es, fr, de, ja or zh. Picking a row stores its code and moves the check. DropdownMenuRadioGroup takes :value, and @value-change receives details.value.

What does each row show?

A flag emoji, hidden from screen readers with aria-hidden, then the language's name in that language. Flags stand for countries, not languages, so the name is what people read.

Does the button show the current language?

No. The outline button always reads Language, after a languages icon, and the check in the menu shows the choice. Print the current name in the button if people should see it without opening the menu.

Can two languages be selected?

No. The radio group holds one code, so picking Français unchecks English.

Can I change the language from the keyboard?

Yes. Open the menu with Enter, Space or Arrow Down, move with the arrow keys, and press Enter to pick a language. Escape closes the menu and returns focus to the button.

Is Select Language a choice?

No. It's the DropdownMenuLabel that names the radio group, followed by a separator. It can't be focused or picked.

API Reference

Dropdown Menu

Sets asChild, value-change="handleLanguageChange", value="language", value="en", value="es" and value="fr". The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples