Retour

Sélecteur de langue (translate)

Le sélecteur de langue permet à l’utilisateur de choisir la langue dans laquelle est affichée le contenu du site, si celui-ci est disponible en plusieurs langues.

Documentation

Sélecteur de langue

<nav role="navigation" class="fr-translate fr-nav" id="translate-7444">
    <div class="fr-nav__item">
        <button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-7443" aria-expanded="false" title="Sélectionner une langue" id="button-7445">
            FR<span class="fr-hidden-lg">&nbsp;- Français</span>
        </button>
        <div class="fr-collapse fr-translate__menu fr-menu" id="translate-7443">
            <ul class="fr-menu__list">
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-7446" aria-current="true">FR - Français</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-7447">EN - English</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-7448">ES - Español</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-7449">DE - Deutsch</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Sélecteur de langue sans bordure

<nav role="navigation" class="fr-translate fr-nav" id="translate-7459">
    <div class="fr-nav__item">
        <button class="fr-translate__btn fr-btn fr-btn--tertiary-no-outline fr-translate__btn fr-btn fr-btn--tertiary-no-outline" aria-controls="translate-7451" aria-expanded="false" title="Sélectionner une langue" id="button-7460">
            FR<span class="fr-hidden-lg">&nbsp;- Français</span>
        </button>
        <div class="fr-collapse fr-translate__menu fr-menu" id="translate-7458">
            <ul class="fr-menu__list">
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-7461" aria-current="true">FR - Français</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-7462">EN - English</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-7463">ES - Español</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-7464">DE - Deutsch</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Sélecteur de langue sur plusieurs colones

<nav role="navigation" class="fr-translate fr-nav" id="translate-7479">
    <div class="fr-nav__item">
        <button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-7478" aria-expanded="false" title="Sélectionner une langue" id="button-7480">
            FR<span class="fr-hidden-lg">&nbsp;- Français</span>
        </button>
        <div class="fr-collapse fr-translate__menu fr-menu" id="translate-7478">
            <ul class="fr-menu__list">
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-7481" aria-current="true">FR - Français</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-7482">EN - English</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-7483">ES - Español</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-7484">DE - Deutsch</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-7485">TR - Türkçe</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-7486">RO - Română</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="el" lang="el" href="#" id="language-7487">EL - Ἑλληνική</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="zh" lang="zh" href="#" id="language-7488">ZH - 國語</a>
                </li>
                <li>
                    <a class="fr-translate__language fr-nav__link" hreflang="uk" lang="uk" href="#" id="language-7489">UK - Українська</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.