Language Selector

The Sonos language selector is a simple way for a user to pick their region and language preferences.

Example

HTML

Because our system still relies heavily on server-side translation, we need quite a bit of HTML for this pattern to work. We hope to slim this down in the future by letting JavaScript do more of the heavy lifting for us.

<div class="row language-selector panel collapse white">
  <div class="columns small-12">
    <div data-select-language class="row">
      <div class="columns small-12 large-centered">
        <ul class="no-bullet row collapse">
          <li data-languages="false" class="columns small-12 large-6">
            <a href="?lang=en-us&region=au">Australia</a>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>Belgium</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-3">
                <li><a href="?lang=fr-fr&region=be" class="button small">French</a></li>
                <li><a href="?lang=nl-nl&region=be" class="button small">Dutch</a></li>
                <li><a href="?lang=en-us&region=be" class="button small">English</a></li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="no-bullet row collapse">
          <li data-languages="true" class="columns small-12 large-6">
            <a>Canada</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=fr-fr&region=ca" class="button small">French</a></li>
                <li><a href="?lang=en-us&region=ca" class="button small">English</a></li>
              </ul>
            </div>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>China</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=zh-cn&region=cn" class="button small">Chinese</a></li>
                <li><a href="?lang=en-us&region=cn" class="button small">English</a></li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="no-bullet row collapse">
          <li data-languages="true" class="columns small-12 large-6">
            <a>Denmark</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=da-dk&region=dk" class="button small">Danish</a></li>
                <li><a href="?lang=en-us&region=dk" class="button small">English</a></li>
              </ul>
            </div>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>France</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=fr-fr&region=fr" class="button small">French</a></li>
                <li><a href="?lang=en-us&region=fr" class="button small">English</a></li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="no-bullet row collapse">
          <li data-languages="true" class="columns small-12 large-6">
            <a>Germany</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=de-de&region=de" class="button small">German</a></li>
                <li><a href="?lang=en-us&region=de" class="button small">English</a></li>
              </ul>
            </div>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>Italy</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=it-it&region=it" class="button small">Italian</a></li>
                <li><a href="?lang=en-us&region=it" class="button small">English</a></li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="no-bullet row collapse">
          <li data-languages="true" class="columns small-12 large-6">
            <a>Mexico</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=es-es&region=mx" class="button small">Spanish</a></li>
                <li><a href="?lang=en-us&region=mx" class="button small">English</a></li>
              </ul>
            </div>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>Netherlands</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=nl-nl&region=nl" class="button small">Dutch</a></li>
                <li><a href="?lang=en-us&region=nl" class="button small">English</a></li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="no-bullet row collapse">
          <li data-languages="true" class="columns small-12 large-6">
            <a>Norway</a>
            <div class="select-language hide">
              <h5>Choose Your Language</h5>
              <ul class="button-group even-2">
                <li><a href="?lang=no-no&region=no" class="button small">Norwegian</a></li>
                <li><a href="?lang=en-us&region=no" class="button small">English</a></li>
              </ul>
            </div>
          </li>
          <li data-languages="true" class="columns small-12 large-6">
            <a>Spain</a>
              <div class="select-language hide">
                <h5>Choose Your Language</h5>
                <ul class="button-group even-2">
                  <li><a href="?lang=es-es&region=es" class="button small">Spanish</a></li>
                  <li><a href="?lang=en-us&region=es" class="button small">English</a></li>
                </ul>
              </div>
            </li>
          </ul>
          <ul class="no-bullet row collapse">
            <li data-languages="true" class="columns small-12 large-6">
              <a>Sweden</a>
              <div class="select-language hide">
                <h5>Choose Your Language</h5>
                <ul class="button-group even-2">
                  <li><a href="?lang=sv-se&region=sv" class="button small">Swedish</a></li>
                  <li><a href="?lang=en-us&region=sv" class="button small">English</a></li>
                </ul>
              </div>
            </li>
            <li data-languages="false" class="columns small-12 large-6">
              <a href="?lang=en-us&region=uk">United Kingdom</a>
            </li>
          </ul>
          <ul class="no-bullet row collapse">
            <li data-languages="true" class="columns small-12 large-6">
              <a>United States</a>
              <div class="select-language hide">
                <h5>Choose Your Language</h5>
                <ul class="button-group even-2">
                  <li><a href="?lang=en-us&region=us" class="button small">English</a></li>
                  <li><a href="?lang=es-es&region=us" class="button small">Spanish</a></li>
                </ul>
              </div>
            </li>
            <li data-languages="true" class="columns small-12 large-6 roe"><a>Rest of Europe</a>
              <div class="select-language hide">
                <h5>Choose Your Language</h5>
                <ul class="button-group even-3">
                  <li><a href="?lang=da-dk&region=roe" class="button small">Danish</a></li>
                  <li><a href="?lang=nl-nl&region=roe" class="button small">Dutch</a></li>
                  <li><a href="?lang=en-us&region=roe" class="button small">English</a></li>
               </ul>
               <ul class="button-group even-3">
                 <li><a href="?lang=fr-fr&region=roe" class="button small">French</a></li>
                 <li><a href="?lang=de-de&region=roe" class="button small">German</a></li>
                 <li><a href="?lang=it-it&region=roe" class="button small">Italian</a></li>
               </ul>
               <ul class="button-group even-3">
                 <li><a href="?lang=no-no&region=roe" class="button small">Norwegian</a></li>
                 <li><a href="?lang=es-es&region=roe" class="button small">Spanish</a></li>
                 <li><a href="?lang=sv-se&region=roe" class="button small">Swedish</a></li>
               </ul>
             </div>
           </li>
         </ul>
         <ul class="no-bullet row collapse">
           <li data-languages="true" class="columns small-12 large-6 roworld"><a>Rest of the World</a>
             <div class="select-language hide">
               <h5>Choose Your Language</h5>
               <ul class="button-group even-3">
                 <li><a href="?lang=da-dk&region=row" class="button small">Danish</a></li>
                 <li><a href="?lang=nl-nl&region=row" class="button small">Dutch</a></li>
                 <li><a href="?lang=en-us&region=row" class="button small">English</a></li>
               </ul>
               <ul class="button-group even-3">
                 <li><a href="?lang=fr-fr&region=row" class="button small">French</a></li>
                 <li><a href="?lang=de-de&region=row" class="button small">German</a></li>
                 <li><a href="?lang=it-it&region=row" class="button small">Italian</a></li>
               </ul>
               <ul class="button-group even-3">
                 <li><a href="?lang=no-no&region=row" class="button small">Norwegian</a></li>
                 <li><a href="?lang=es-es&region=row" class="button small">Spanish</a></li>
                 <li><a href="?lang=sv-se&region=row" class="button small">Swedish</a></li>
               </ul>
             </div>
           </li>
         </ul>
       </div>
     </div>
  </div>
</div>

Language Selector + Reveal

One of most common ways we can use the language selector is with a modal window. The language selector also supports theming with the Sonos brand colors. The following examples will show what this can look like.

Choose Language

(the language selector theme: white)

Choose Your Country

×
Choose Language

(the language selector theme: dark)

Choose Your Country

×

JavaScript Call

In order to initialize the language selector, we need to call a piece of JavaScript.

$('[data-select-language]').selectLanguage();