Untere Tab-Leiste mit Kerbe
Der aktive Tab steigt in eine schwebende Blase, und die Leiste darunter hat eine Kerbe, die ihr folgt.
Einstellungen
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">Start</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">Suchen</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">Erstellen</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">Nachrichten</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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Tab-Leisten mit Kerbe sind in App-Konzepten beliebt, weil der aktive Bereich wörtlich heraussticht. Beim Wählen eines Tabs gleitet eine farbige Blase federnd an der Oberkante entlang, das Icon steigt weiß hinein, und eine runde Aussparung in der Leiste wandert mit, sodass die Blase immer in ihrer Kerbe sitzt, während das Label die Akzentfarbe bekommt.
Die Kerbe ist eine CSS-Maske, gesteuert von einer registrierten Eigenschaft, die Tabs sind Radiobuttons, die Leiste funktioniert also ohne JavaScript und mit Pfeiltasten. Tausche Icons und Labels, bleib bei höchstens fünf Einträgen und wähle eine kräftige Hauptfarbe.