# Onglets

Le bloc **Onglets** affiche plusieurs contenus au même endroit : le visiteur passe de l’un à l’autre par une barre d’onglets. Cette page décrit les blocs qui le composent, chacun de ses réglages et son comportement sur téléphone et au clavier.

## Ajouter le bloc

Insérez le bloc **Onglets** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)). Il arrive avec sa barre de navigation, sa zone de panneaux et un premier onglet. Vous écrivez le contenu dans les panneaux : la barre se construit seule à partir d’eux.

Pour ajouter un onglet, vous avez trois chemins. Chacun crée au bon rang un panneau et son onglet dans la barre.

- Le bouton **Ajouter un onglet**, sous le bloc, ajoute l’onglet en dernier. Il s’affiche quand le bloc Onglets ou l’un de ses blocs est sélectionné.
- Le **+** de la zone des panneaux ajoute un onglet sans ouvrir la liste des blocs.
- Sur un panneau, **Ajouter avant** ou **Ajouter après** dans le menu **⋮** du bloc, ou `Ctrl+Alt+T` et `Ctrl+Alt+Y`, ajoutent un onglet juste avant ou juste après.

Supprimez ou déplacez un panneau : son onglet le suit. La barre ne se modifie pas à la main.

## Les blocs qui composent les onglets

| Bloc | Rôle | États |
| --- | --- | --- |
| **Navigation des onglets** | La barre, une rangée que vous disposez dans son panneau **Mise en page flex**. Elle accepte un Conteneur avant la bande d’onglets et un autre après. | **Par défaut**, **Survol** |
| **Bande d’onglets** | Les onglets et les flèches, dans la barre. | **Par défaut**, **Survol** |
| **Élément de navigation des onglets** | Un onglet. Il accepte du texte, une icône ou une image. | **Par défaut**, **Survol**, **Focus**, **Actif** |
| **Forme d’indicateur d’onglet** | Un onglet en forme de pastille, avec le style de navigation **Formes**. | **Par défaut**, **Survol** |
| **Panneaux des onglets** | La zone qui contient les panneaux. | **Par défaut**, **Survol** |
| **Panneau d’onglet** | Le contenu d’un onglet. Il accepte n’importe quel bloc. | **Par défaut**, **Survol**, **Actif** |
| **Bouton de navigation** | Les flèches précédent et suivant. Une flèche accepte un texte, une icône ou un Conteneur. | **Par défaut**, **Survol**, **Focus**, **Désactivé** |

## Régler les onglets

Sélectionnez le bloc **Onglets**, ouvrez l’onglet **Réglages** puis le panneau **Réglages des onglets**. Certains réglages ne s’affichent qu’avec un mode de rotation, une position de flèches ou un autre réglage : la colonne Effet le précise.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Style de la navigation** | **Blocs de contenu** : chaque onglet est composé de blocs (texte, icône, image). **Formes** : chaque onglet est une forme dont vous réglez la couleur, la taille et la bordure. | **Blocs de contenu** |
| **Onglet actif par défaut** | L’onglet ouvert au chargement de la page. **Aucun onglet actif** n’ouvre aucun panneau avant que le visiteur choisisse un onglet. | **Onglet 1** |
| **Afficher les panneaux voisins** | Aligne les panneaux côte à côte : le panneau ouvert au milieu, ses voisins qui dépassent sur les bords. Le visiteur clique sur un voisin pour l’ouvrir. | Désactivé |
| **Mode de rotation** | **Manuelle** : le visiteur choisit l’onglet. **Auto** : les onglets changent seuls, à intervalle régulier. **Les deux** : les onglets changent seuls et le visiteur peut choisir. | **Manuelle** |
| **Position de la navigation** | Place la barre **Haut**, **Droite**, **Bas** ou **Gauche** des panneaux. | **Haut** |
| **Désactiver la navigation par flèches** | Retire les flèches précédent et suivant. En mode **Manuelle** ou **Les deux**. | Désactivé |
| **Emplacement des flèches** | **Dans la barre de navigation** ou **Autour des panneaux**. Quand les flèches sont affichées. | **Dans la barre de navigation** |
| **Flèches en surimpression** | Pose les flèches par-dessus le contenu des panneaux au lieu de les placer à côté. Avec les flèches **Autour des panneaux**. | Désactivé |
| **Boucle** | Depuis le dernier onglet, suivant revient au premier. Désactivé, les flèches et le clavier s’arrêtent aux deux bouts. La flèche en bout de course prend alors son état **Désactivé**. En mode **Manuelle** ou **Les deux**. | Activé |
| **Glisser sur écran tactile** | Un glissé horizontal sur les panneaux ouvre l’onglet suivant ou précédent. En mode **Manuelle** ou **Les deux**. | Désactivé |
| **Afficher un bouton de pause** | Pose un bouton qui arrête la rotation. En mode **Auto** ou **Les deux**. | Activé |
| **Durée de rotation aléatoire** | Tire au sort l’intervalle entre deux onglets, entre un minimum et un maximum. En mode **Auto** ou **Les deux**. | Désactivé |
| **Durée de rotation (ms)** | Le temps d’affichage d’un onglet, de 500 à 10 000 ms. | 2 000 ms |
| **Durée de rotation minimale (ms)** et **Durée de rotation maximale (ms)** | Les bornes de l’intervalle tiré au sort, de 500 à 10 000 ms. Avec **Durée de rotation aléatoire**. | 2 000 ms et 3 000 ms |

![Le panneau Réglages des onglets en mode Manuelle : Style de la navigation sur Blocs de contenu, Onglet actif par défaut sur Onglet 1, Afficher les panneaux voisins, Mode de rotation, Position de la navigation sur Haut, puis les réglages des flèches, Boucle activée et Glisser sur écran tactile.](https://static.lovelyrender.com/uploads/2026/10/907-doc-blocs2-onglets.png)

Les couleurs, la typographie, la taille, les bordures et les animations se règlent comme sur tout bloc : voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/), [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/), [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) et [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/).

## La rotation automatique

En mode **Auto** ou **Les deux**, les onglets reçoivent un bouton de pause. Un contenu qui bouge seul plus de cinq secondes doit pouvoir être arrêté. Un lecteur d’écran annonce ce bouton **Mettre la rotation en pause**.

Si vous désactivez **Afficher un bouton de pause**, le panneau affiche un avertissement : sans bouton, ces onglets échouent au critère WCAG 2.2.2 (niveau A). Le panneau **Accessibilité** de l’éditeur relève le même défaut.

**Attention :** En mode **Auto**, la barre d’onglets n’est pas publiée : rien n’est cliquable et les panneaux se succèdent seuls. Elle est masquée dans l’éditeur comme sur le site. Pour garder des onglets cliquables pendant la rotation, choisissez **Les deux**.

## Habiller les onglets

À l’insertion, chaque onglet reçoit le style enregistré **Onglet** et chaque panneau le style **Panneau d’onglet**. Avec le style de navigation **Blocs de contenu**, l’onglet ouvert porte un trait de 2 px sous son libellé et prend votre couleur principale. Les autres onglets portent le même trait, transparent, pour que le texte ne bouge pas au changement d’onglet.

Pour changer cette apparence, sélectionnez un onglet, choisissez l’état **Actif** dans l’onglet **Styles** et réglez sa couleur, sa bordure ou son fond. Mettez à jour le style **Onglet** pour que tous les onglets du site suivent ([Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)).

**Conseil :** Gardez un repère autre que la couleur pour l’onglet actif, un trait ou un fond. Une information portée par la seule couleur échappe à une partie des visiteurs.

La partie **Onglets** du catalogue de design donne une allure à tous les onglets du site : **Souligné**, **Pilules**, **Pilules teintées**, **Segmenté**, **Encadré** ou **Liseré** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)). Pour écarter les onglets les uns des autres, appliquez à la bande d’onglets le style **Espacé**, un écart de 8 px ([Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)).

## L’apparition d’un panneau

Chaque panneau reçoit à sa création une animation **Fondu d’entrée** de 600 ms, déclenchée **Quand il est activé** et réglée sur **Rejouer**. Elle se joue chaque fois que le panneau s’ouvre. Vous la trouvez dans l’onglet **Animations** du panneau.

- Pour un autre effet, sélectionnez le panneau et remplacez le fondu dans l’onglet **Animations**. Chaque panneau peut avoir le sien.
- Pour une ouverture sans effet, supprimez l’animation : le panneau apparaît d’un coup.
- Avec **Afficher les panneaux voisins**, les panneaux n’ont pas ce fondu : il rendrait les voisins invisibles. Une animation que vous avez posée vous-même reste.

L’affichage du panneau ouvert et le masquage des autres sont gérés par le bloc. Sur un panneau, la case **Masquer ce bloc** de l’onglet **Styles** est grisée.

## Les panneaux voisins

Avec **Afficher les panneaux voisins**, les onglets montrent une rangée : le panneau ouvert au milieu, un bout de ses deux voisins sur les bords.

- Un panneau occupe 80 % de la rangée tant que vous ne lui donnez pas une autre largeur.
- L’état **Par défaut** du panneau habille les voisins, son état **Actif** le panneau ouvert. Une opacité de 50 % à l’état **Par défaut** atténue les voisins.
- Avec **Boucle**, le dernier panneau a le premier pour voisin. Sans, le premier n’a pas de voisin à gauche ni le dernier à droite.
- Les voisins ne se lisent ni au clavier ni par un lecteur d’écran : on les atteint par les onglets.

## Sur téléphone

Posée en haut ou en bas des panneaux, la bande d’onglets reste sur une seule rangée. Les libellés se resserrent d’abord, quitte à passer sur deux lignes. Quand il n’y a plus de place, la bande défile sur le côté. Les flèches restent aux deux bouts de la barre et l’onglet qu’elles ouvrent revient au centre.

- Pour des onglets sur plusieurs rangées, sélectionnez la bande d’onglets et activez **Passage à la ligne** dans sa mise en page, écran par écran.
- Les onglets défilent derrière les flèches : donnez un fond aux flèches dans leur style.
- Posée sur un côté, la barre est une colonne qui s’allonge vers le bas.
- Avec **Glisser sur écran tactile**, un glissé horizontal d’au moins 40 px sur les panneaux change d’onglet. Un glissé plus vertical qu’horizontal fait défiler la page.

## Des onglets en accordéon sur téléphone

Pour afficher chaque onglet suivi de son panneau sur téléphone, dissolvez la bande et la zone des panneaux sur cet écran.

1. Sélectionnez la **Bande d’onglets**. Dans son panneau **Mise en page flex**, choisissez l’écran Mobile puis activez **Dissoudre sur cet écran**.
2. Sélectionnez les **Panneaux des onglets**. Dans leur panneau **Dissoudre**, activez **Mobile**.
3. Sélectionnez le bloc **Onglets**. Son panneau **Mise en page en grille** liste les onglets et les panneaux. Donnez à chacun son ordre sur Mobile : onglet 1, panneau 1, onglet 2, panneau 2.

Sur cet écran, le panneau fermé sort de la page et le panneau ouvert apparaît sans fondu. Les flèches s’effacent. Au clavier et au lecteur d’écran, ce sont toujours des onglets.

## Accessibilité

Le bloc suit le modèle d’onglets attendu par les technologies d’assistance. Vous n’avez rien à activer.

| Touche | Effet |
| --- | --- |
| `Tab` | Entre dans la barre. Toute la barre compte pour un seul arrêt. |
| `←` et `→` | Ouvre l’onglet précédent ou suivant et lui donne le focus. Sans **Boucle**, s’arrête aux deux bouts. |
| `Entrée` ou `Espace` | Ouvre l’onglet qui a le focus. |
| `Tab` depuis la barre | Va au panneau ouvert, puis à son contenu. |

Un lecteur d’écran annonce le rang de l’onglet et son état, relie chaque onglet à son panneau et ne lit pas les panneaux fermés. Les flèches de la barre restent cliquables à la souris mais sortent du parcours au clavier : `←` et `→` font la même chose.

Une flèche qui contient plusieurs libellés empilés, un par onglet, doit masquer les autres avec **Masquer ce bloc**. Une opacité ne suffit pas : un lecteur d’écran lit tout le texte du bouton.

## Un bloc avant ou après les onglets

La barre accepte un Conteneur avant la bande d’onglets et un autre après. Le bloc Onglets donne l’état **Actif** au premier quand le premier onglet est ouvert. Il le donne au second quand le dernier onglet l’est. Vous pouvez l’habiller dans cet état, le masquer à l’état **Par défaut** avec **Masquer ce bloc** ou l’animer **Quand il est activé**.

Par exemple, dans un récit en cinq onglets sans **Boucle**, un Conteneur après la bande porte un bouton masqué à l’état **Par défaut**. Sur la flèche suivante, cochez **Masquer ce bloc** à l’état **Désactivé**. Au dernier onglet, la flèche disparaît et le bouton prend sa place.

## Voir aussi

- [Accordéon](https://lovelyrender.com/fr/documentation/bloc-accordeon/)
- [Diaporama](https://lovelyrender.com/fr/documentation/bloc-slider/)
- [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)
- [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/)