Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton.
Documentation<a class="fr-link" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien
</a>
<a class="fr-link fr-link--sm" href="#">
Label lien
</a>
<a class="fr-link fr-link--lg" href="#">
Label lien
</a>
<a class="fr-link" aria-disabled="true" role="link">
Label lien
</a>
Lorsque que l'on a plus d'un lien, il convient d'utiliser un groupe de liens.
La taille de tous les liens peut être définie au niveau du groupe.
<ul class="fr-links-group">
<li>
<a class="fr-link" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
Label lien 9
</a>
</li>
</ul>
Le lien de “retour en haut de page” est une ancre vers un élément dont l’id est "top".
Afin de le faire fonctionner correctement, il est nécessaire d’ajouter l’attribut id (id="top") sur l’élement le plus haut de la page comme le body (<body id="top" ...>) ou les liens d’évitement (<div class="fr-skiplinks" id="top">), afin que le focus de navigation soit lui aussi replacé en haut de page.
Le lien haut de page est un lien classique fr-link composé de l'icone arrow-up-fill, alignée à gauche, et du label "Haut de page".
Le lien peut être aligné sur la gauche ou la droite du contenu.
Actuce: Pour aligner le lien à droite, l'insérer dans une <div class="fr-grid-row fr-grid-row--right">.
<a class="fr-link fr-icon-arrow-up-fill fr-link--icon-left" href="#top">
Haut de page
</a>