Barre qui range les liens dans Plus
Quand la place manque, les derniers liens passent dans un menu Plus avec compteur ; tire la poignée ou change la largeur.
Réglages
Code
<div class="uvq12-pp"><nav aria-label="Principal"><a class="lg" href="#"><i aria-hidden="true"></i>Nord</a><ul class="ls"><li><a href="#" aria-current="page">Accueil</a></li><li><a href="#">Produit</a></li><li><a href="#">Tarifs</a></li><li><a href="#">Clients</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Emplois</a></li><li><a href="#">Contact</a></li></ul><div class="mr"><button type="button" aria-expanded="false" aria-controls="uvq12-pp-m"><span>Plus</span><b>0</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul class="mm" id="uvq12-pp-m"><li><a href="#" aria-current="page">Accueil</a></li><li><a href="#">Produit</a></li><li><a href="#">Tarifs</a></li><li><a href="#">Clients</a></li><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li><li><a href="#">Emplois</a></li><li><a href="#">Contact</a></li></ul></div><span class="hd" aria-hidden="true"></span></nav></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Le motif priority plus pour les menus adaptatifs : les liens restent dans la barre tant qu'ils tiennent, et les autres passent dans un menu Plus avec un compteur qui sursaute à chaque changement. Un ResizeObserver recalcule à chaque largeur, donc cela marche dans une barre latérale, une carte ou un vrai en-tête. La page courante est marquée aux deux endroits et le menu répond aux flèches et à Échap.
Teste-le avec le réglage de largeur ou la poignée, et choisis les couleurs principale et secondaire du lien actif. Classe les liens par importance, car les derniers partent en premier.