DSFR v1.13.1
Le composant onglet permet aux utilisateurs de naviguer dans différentes sections de contenu au sein d’une même page.
DocumentationLorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6438" class="fr-tabs__tab fr-icon-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6438-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6439" class="fr-tabs__tab fr-icon-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6439-panel">Libellé onglet 2</button>
</li>
<li role="presentation">
<button type="button" id="tab-6440" class="fr-tabs__tab fr-icon-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6440-panel">Libellé onglet 3</button>
</li>
<li role="presentation">
<button type="button" id="tab-6441" class="fr-tabs__tab fr-icon-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6441-panel">Libellé onglet 4</button>
</li>
</ul>
<div id="tab-6438-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6438" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6439-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6439" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6440-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6440" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6441-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6441" tabindex="0">
<!-- données de test -->
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6445" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6445-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6446" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6446-panel">Libellé onglet 2</button>
</li>
</ul>
<div id="tab-6445-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6445" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6446-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6446" tabindex="0">
<!-- données de test -->
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tabs-in-tabs-6486" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabs-in-tabs-6486-panel">Onglet principal 0</button>
</li>
<li role="presentation">
<button type="button" id="tabs-in-tabs-6497" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabs-in-tabs-6497-panel">Onglet principal 1</button>
</li>
</ul>
<div id="tabs-in-tabs-6486-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabs-in-tabs-6486" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6487" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6487-panel">Onglet imbriqué 0</button>
</li>
<li role="presentation">
<button type="button" id="tab-6488" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6488-panel">Onglet imbriqué 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6489" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6489-panel">Onglet imbriqué 2</button>
</li>
</ul>
<div id="tab-6487-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6487" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6475" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6475-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6476" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6476-panel">Libellé onglet 2</button>
</li>
</ul>
<div id="tab-6475-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6475" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6476-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6476" tabindex="0">
<!-- données de test -->
</div>
</div>
</div>
<div id="tab-6488-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6488" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6478" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6478-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6479" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6479-panel">Libellé onglet 2</button>
</li>
<li role="presentation">
<button type="button" id="tab-6480" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6480-panel">Libellé onglet 3</button>
</li>
</ul>
<div id="tab-6478-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6478" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6479-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6479" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6480-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6480" tabindex="0">
<!-- données de test -->
</div>
</div>
</div>
<div id="tab-6489-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6489" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6482" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6482-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6483" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6483-panel">Libellé onglet 2</button>
</li>
<li role="presentation">
<button type="button" id="tab-6484" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6484-panel">Libellé onglet 3</button>
</li>
<li role="presentation">
<button type="button" id="tab-6485" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6485-panel">Libellé onglet 4</button>
</li>
</ul>
<div id="tab-6482-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6482" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6483-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6483" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6484-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6484" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6485-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6485" tabindex="0">
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
<div id="tabs-in-tabs-6497-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabs-in-tabs-6497" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6498" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6498-panel">Onglet imbriqué 0</button>
</li>
<li role="presentation">
<button type="button" id="tab-6499" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6499-panel">Onglet imbriqué 1</button>
</li>
</ul>
<div id="tab-6498-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6498" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6491" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6491-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6492" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6492-panel">Libellé onglet 2</button>
</li>
</ul>
<div id="tab-6491-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6491" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6492-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6492" tabindex="0">
<!-- données de test -->
</div>
</div>
</div>
<div id="tab-6499-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6499" tabindex="0">
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6494" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6494-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6495" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6495-panel">Libellé onglet 2</button>
</li>
<li role="presentation">
<button type="button" id="tab-6496" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6496-panel">Libellé onglet 3</button>
</li>
</ul>
<div id="tab-6494-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6494" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6495-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6495" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6496-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6496" tabindex="0">
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
<div class="fr-tabs">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-accordion-6505" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-accordion-6505-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-accordion-6507" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-accordion-6507-panel">Libellé onglet 2</button>
</li>
</ul>
<div id="tab-accordion-6505-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-accordion-6505" tabindex="0">
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button type="button" class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-6506">Libellé accordéon</button>
</h3>
<div id="accordion-6506" class="fr-collapse">
<!-- données de test -->
</div>
</section>
</div>
<div id="tab-accordion-6507-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-accordion-6507" tabindex="0">
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button type="button" class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-6508">Libellé accordéon</button>
</h3>
<div id="accordion-6508" class="fr-collapse">
<!-- données de test -->
</div>
</section>
</div>
</div>
<div class="fr-tabs fr-tabs--viewport-width">
<ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
<li role="presentation">
<button type="button" id="tab-6512" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tab-6512-panel">Libellé onglet 1</button>
</li>
<li role="presentation">
<button type="button" id="tab-6513" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tab-6513-panel">Libellé onglet 2</button>
</li>
</ul>
<div id="tab-6512-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-6512" tabindex="0">
<!-- données de test -->
</div>
<div id="tab-6513-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-6513" tabindex="0">
<!-- données de test -->
</div>
</div>