Responsive Nav
Barre d'onglets qui n'affiche que ses icônes dans une colonne étroite et ajoute les libellés dès que son conteneur atteint 280 px — sans media query.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0746-root est elle-même le conteneur interrogé (container: ctb-nav / inline-size). Elle contient un <nav class="ctb-bar"> et un lien .ctb-item par onglet : une icône SVG décorative et un <span class="ctb-label">. Ce qui décide de l'affichage, c'est la largeur de l'endroit où vous posez la barre, pas celle de l'écran : la même barre peut montrer ses libellés dans la page et rester en icônes dans une colonne voisine.
Sous 280 px, les libellés sont masqués à l'œil par la technique « visuellement caché » (boîte de 1 px, clip-path: inset(50%)) : ils restent dans la page et donnent leur nom aux liens. La règle @container ctb-nav (min-width: 280px) leur rend leur place à côté de l'icône. Les onglets restent centrés, espacés de 6 px, sur un fond rgba(255,255,255,.04) arrondi à 14 px.
L'onglet actif est celui qui porte aria-current="page" : fond violet rgba(139,92,246,.2), icône #8b5cf6, libellé #a78bfa. Le petit script se branche sur chaque racine (une fois, même s'il est collé deux fois) et déplace cet attribut sur le lien cliqué ; sur un site à plusieurs pages, posez simplement aria-current côté serveur.
Accessibilité
- Vrais liens : chaque onglet est un
<a href>, atteint par Tab et suivi par Entrée, au doigt comme à la souris. Sur Safari, Tab ne s'arrête sur les liens qu'avec Option+Tab ou le réglage « Utiliser Tab pour sélectionner » de macOS. - Nom conservé en mode icônes : le libellé est caché à l'œil, pas retiré : un lecteur d'écran annonce « Recherche, lien » même à 160 px de large. Les icônes portent
aria-hidden="true". - Onglet en cours annoncé :
aria-current="page"est lu (« page actuelle »). À l'œil, l'onglet actif se distingue par un fond violet et une couleur de texte : si vous voulez un repère qui ne repose pas sur la couleur, ajoutez un soulignement ou un trait sous.ctb-item[aria-current="page"]. - Focus visible : contour de 2 px
#a78bfadécalé de 2 px sur:focus-visible. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les fondus de fond et de couleur (0,3 s) sont supprimés ; l'apparition des libellés a toujours été instantanée.
Compatibilité navigateur
Requêtes de conteneur (container-type, @container : Chrome 105, Firefox 110, Safari 16) et :focus-visible (Safari 15.4). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5, deux copies dans la même page : libellés cachés jusqu'à 279 px, visibles dès 281 px, toujours sur une ligne à 800 px ; clic, toucher et Entrée déplacent l'onglet actif de la seule copie touchée ; 0 erreur.
Sans requêtes de conteneur (navigateur antérieur), la barre reste en icônes seules à toutes les largeurs ; les libellés restent lus par les lecteurs d'écran et les liens fonctionnent. Sans JavaScript, seul le déplacement de l'onglet actif au clic disparaît.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0746-root">
<nav class="ctb-bar" aria-label="…">
<a class="ctb-item" href="#…" aria-current="page">
<svg aria-hidden="true">…</svg>
<span class="ctb-label">…</span>
</a>
<a class="ctb-item" href="#…">…</a>
</nav>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Palier (CSS — @container ctb-nav (min-width: 280px)) |
280 px | Changez la valeur pour afficher les libellés plus tôt ou plus tard ; elle porte sur la largeur de la racine. |
Onglets (HTML — .ctb-item) |
3 liens : Accueil, Recherche, Profil | Ajoutez ou retirez des liens ; avec plus d'onglets, relevez le palier pour que tous les libellés tiennent sur une ligne. |
Onglet actif (HTML — aria-current="page") |
Le premier lien | Posez l'attribut sur le lien de la page en cours ; le script le déplace au clic dans une appli d'une seule page. |
Couleur d'accent (CSS — .ctb-item[aria-current="page"]) |
Fond rgba(139,92,246,.2), icône #8b5cf6, texte #a78bfa |
Remplacez ces trois valeurs pour l'onglet actif, et rgba(139,92,246,.15) pour le survol. |
Fond (CSS — .fx-0746-root et .ctb-bar) |
#0a0a0f arrondi à 16 px, barre rgba(255,255,255,.04) |
Mettez la racine en background: transparent pour qu'elle prenne la couleur de votre pied de page. |
Icônes (HTML — <svg> 24 × 24 en trait) |
Maison, loupe, silhouette ; trait 1,5 | Collez vos propres icônes en trait (fill: none) : la couleur suit l'état de l'onglet. |
FAQ
aria-current="page" sur son lien et le script peut être retiré : l'adaptation à la largeur est en CSS pur.
