Language selector

Proposed / not final

Purpose

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.

Language selector with two languages

Allow users to select their preferred language when visiting a website in two languages.

Example HTML usage:

<!--Language selector with two languages-->
<button type="button" class="btn btn-primary"><span lang="es" xml:lang="es">Español</span></button>

Demo: Language selector with two languages

Language selector with three or more languages

Give users the ability to select their preferred language when visiting a website available in three or more languages.

Example HTML usage:

<!--Language selector with three or more languages-->
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="language-options"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Languages</button>
    <div class="dropdown-menu dropdown-menu-left" aria-labelledby="language-options">
      <a class="dropdown-item" href="#"><span lang="ar" xml:lang="ar"><strong>العربية</strong> (Arabic)</span></a>                    
      <a class="dropdown-item" href="#"><span lang="en" xml:lang="en"><strong>English</strong></span></a>
      <a class="dropdown-item" href="#"><span lang="es" xml:lang="es"> <strong>Español</strong> (Spanish) </span></a>
      <a class="dropdown-item" href="#"><span lang="fr" xml:lang="fr"> <strong>Français</strong> (French) </span></a>
      <a class="dropdown-item" href="#"><span lang="it" xml:lang="it"> <strong>Italiano</strong> (Italian) </span></a>                    
    </div>
    </div>

Demo: Language selector with multiple languages

Language selector unstyled

Use the unstyled version of the language button if your implementation calls for a link.

Example HTML usage:

<!--Language selector unstyled-->
<div class="dropdown">
    <button class="btn btn-link dropdown-toggle" type="button" id="language-options"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Languages</button>
    <div class="dropdown-menu dropdown-menu-left" aria-labelledby="language-options">
      <a class="dropdown-item" href="#"><span lang="ar" xml:lang="ar"><strong>العربية</strong> (Arabic)</span></a>                    
      <a class="dropdown-item" href="#"><span lang="en" xml:lang="en"><strong>English</strong></span></a>
      <a class="dropdown-item" href="#"><span lang="es" xml:lang="es"> <strong>Español</strong> (Spanish) </span></a>
      <a class="dropdown-item" href="#"><span lang="fr" xml:lang="fr"> <strong>Français</strong> (French) </span></a>
      <a class="dropdown-item" href="#"><span lang="it" xml:lang="it"> <strong>Italiano</strong> (Italian) </span></a>                    
    </div>
    </div>

Demo: Language selector unstyled