Skip to main content
USWDS + Tailwind

Language selector

The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.

Examples

Toggle

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
HTML 
<a href="#" class="inline-block rounded-sm font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">
  <span lang="en">Español</span>
</a>

This component requires the following JavaScript plugin:

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
HTML 
<div class="space-y-8">


  <section>
    <div data-part="dropdown-root">
      <button
        data-part="dropdown-trigger"
        class="rounded-sm font-bold leading-none cursor-pointer text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
      >
        Languages
      </button>
      <div
        data-part="dropdown-content"
        class="outline-hidden bg-blue-warm-80v w-60 divide-y divide-gray-cool-10 z-30"
      >
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="ar">
            <strong>العربية</strong>
            (Arabic) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="zh">
            <strong>简体字</strong>
            (Chinese - Simplified) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="en">
            <strong>English</strong>
          </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="es">
            <strong>Español</strong>
            (Spanish) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="fr">
            <strong>Français</strong>
            (French) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="it">
            <strong>Italiano</strong>
            (Italian) </span>
        </a>
        <a
          data-part="dropdown-item"
          href="#"
          class="block text-white p-2 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        >
          <span lang="ru">
            <strong>Pусский</strong>
            (Russian) </span>
        </a>
      </div>
    </div>
  </section>


</div>

Component API

Root

  • x-dropdown

    Custom Alpine directive that marks the Dropdown Root.

Trigger

  • x-dropdown:trigger

    Custom Alpine directive that marks the Dropdown Trigger.

  • aria-controls

    Type: string

    Accessibility attribute that communicates that the Dropdown Trigger controls the state and visibility of the Dropdown Menu.

    Automatically handled with JavaScript.

  • aria-expanded

    Type: boolean
    Default: false

    Accessibility attribute that communicates whether the Dropdown Menu is expanded or collapsed.

    Automatically handled with JavaScript.

  • aria-haspopup

    Type: string

    Accessibility attribute that communicates that this component has an interactive popup element.

    Automatically handled with JavaScript.

Content

  • x-dropdown:content

    Custom Alpine directive that marks the Dropdown Content.

  • role

    Type: string
    Value: 'menu'

    Automatically handled with JavaScript.

  • aria-labelledby

    Type: string

    Accessibility attribute that links the Dropdown Content to the Dropdown Trigger via id.

    Automatically handled with JavaScript.

  • tabindex

    Type: number
    Value: -1

    Prevents users from tabbing to this element.

    Automatically handled with JavaScript.

Item

  • x-dropdown:item

    Custom Alpine directive that marks the Dropdown Item.

  • role

    Type: string
    Value: 'menuitem'

    Automatically handled with JavaScript.

  • tabindex

    Type: number
    Value: -1

    Prevents users from tabbing to this element.

    Automatically handled with JavaScript.

Keyboard Interactions

  • Down Arrow

    When focus is on Dropdown Trigger, opens and moves focus to Dropdown Content.

    When focus is on the Dropdown Content, moves focus to first Dropdown Item.

    When focus is on a Dropdown Item, moves focus to next Dropdown Item.

  • Up Arrow

    When focus is on Dropdown Trigger, opens and moves focus to Dropdown Content.

    When focus is on the Dropdown Content, moves focus to last Dropdown Item.

    When focus is on a Dropdown Item, moves focus to previous Dropdown Item.

  • Enter

    When focus is on an Dropdown Item, selects that item.

  • Escape

    When the Dropdown Content is open, closes the Dropdown Content and moves focus to the Dropdown Trigger.