Barre d'onglets inférieure à encoche
L'onglet actif monte dans une bulle flottante et la barre est découpée dessous par une encoche qui la suit.
Réglages
Code
<nav class="uv-nnb" aria-label="Navigation"><div class="br"></div><span class="bu" aria-hidden="true"></span><label><input type="radio" name="uv-nnb" checked><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5V20h-5v-5.5h-6V20H4z"/></svg></span><span class="tx">Accueil</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></span><span class="tx">Rechercher</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span><span class="tx">Créer</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></span><span class="tx">Messages</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20c.8-3.8 3.9-6 7.5-6s6.7 2.2 7.5 6"/></svg></span><span class="tx">Profil</span></label></nav>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
Les barres d'onglets à encoche plaisent dans les concepts d'applis mobiles car la rubrique active ressort littéralement. Choisir un onglet fait glisser une bulle colorée le long du bord supérieur avec un ressort, y fait monter l'icône en blanc et déplace une découpe circulaire dans la barre, pendant que le libellé prend la couleur d'accent.
L'encoche est un masque CSS piloté par une propriété enregistrée et les onglets sont des boutons radio, la barre fonctionne donc sans JavaScript et avec les flèches. Change icônes et libellés, garde cinq éléments au plus et choisis une couleur principale franche.