Vertikale Tabs mit Leuchtbalken
Ein leuchtender Balken gleitet eine dünne Schiene hoch und runter bis zur aktiven Option.
Einstellungen
Code
<div class="uv-rdv"><span class="ln"><i></i></span><button>Übersicht</button><button class="on">Aktivität</button><button>Einstellungen</button><button>Hilfe</button></div>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 Radiobuttons
Wofür du ihn nutzen kannst
Das ist eher ein Seitenmenü als ein Formularfeld: die Bereiche eines Kundenkontos, die Sidebar eines Dashboards mit Übersicht, Aktivität und Einstellungen oder die Kapitel einer Dokumentation. Der Leuchtbalken gleitet zum aktiven Punkt, und du weißt immer, wo du bist. Vertikale Tabs in HTML und CSS, mit etwas JavaScript für den Balken.
Am schönsten mit vier bis sieben Einträgen ähnlicher Länge. Auf dunklen Themes kommt das Leuchten gut zur Geltung, auf hellen solltest du es etwas abschwächen, damit der Balken nicht verschwommen wirkt.