Language Selector

The Language Selector component allows for the configuration and display of a language selector item on a page.

Examples

Authoring

Configure Dialog

The configure dialog allows the content author to define the language selector and how it will behave and appear for a visitor to the page.

Properties Tab

• Navigation Root
  • This is where the langauge navigation of the site should start.
  • The language structure of the site begins on the next level below this root.
• Language Structure Depth
  • This is how many levels of the content tree below the Navigation Root represent the language structure of the site. For Informa sites the value should be typically 1.

Developers

Markup

<nav class="cmp-languagenavigation">
  <ul class="cmp-languagenavigation__group">
    <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-DE cmp-languagenavigation__item--langcode-de-DE cmp-languagenavigation__item--level-0">
      <span class="cmp-languagenavigation__item-title" lang="de-DE">Deutschland</span>
      <ul class="cmp-languagenavigation__group">
        <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-DE cmp-languagenavigation__item--langcode-de-DE cmp-languagenavigation__item--level-1">
          <a class="cmp-languagenavigation__item-link" href="../../de/de/language-navigation.html" hreflang="de-DE" lang="de-DE" rel="alternate" title="Deutsch">Deutsch</a>
        </li>
      </ul>
    </li>
    <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-FR cmp-languagenavigation__item--langcode-fr-FR cmp-languagenavigation__item--level-0">
      <span class="cmp-languagenavigation__item-title" lang="fr-FR">France</span>
      <ul class="cmp-languagenavigation__group">
        <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-FR cmp-languagenavigation__item--langcode-fr-FR cmp-languagenavigation__item--level-1">
          <a class="cmp-languagenavigation__item-link" href="../../fr/fr/language-navigation.html" hreflang="fr-FR" lang="fr-FR" rel="alternate" title="Français">Français</a>
        </li>
      </ul>
    </li>
    <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-US cmp-languagenavigation__item--langcode-en-US cmp-languagenavigation__item--level-0 cmp-languagenavigation__item--active">
      <span class="cmp-languagenavigation__item-title" lang="en-US">United States</span>
      <ul class="cmp-languagenavigation__group">
        <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-US cmp-languagenavigation__item--langcode-en-US cmp-languagenavigation__item--level-1 cmp-languagenavigation__item--active">
          <a class="cmp-languagenavigation__item-link" href="language-navigation.html" hreflang="en-US" lang="en-US" rel="alternate" title="English">English</a>
        </li>
        <li class="cmp-languagenavigation__item cmp-languagenavigation__item--countrycode-ES cmp-languagenavigation__item--langcode-es-ES cmp-languagenavigation__item--level-1">
          <a class="cmp-languagenavigation__item-link" href="../es/language-navigation.html" hreflang="es-ES" lang="es-ES" rel="alternate" title="Español">Español</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>