Brutalistische Brotkrumen-Navigation
Eine brutalistisch inspirierte Breadcrumb-Navigationskomponente für Buchungs-/Reservierungssysteme mit hohem Kontrast, Schwarzweiß mit heller Akzentfarbe und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Jeder Schritt ist klar abgegrenzt mit fetter Typografie und einem eindeutigen Trennzeichen.
HTML-Code
<nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
<ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
Booking
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Select Service
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Choose Date & Time
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Confirm Details
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center">
<span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
Payment
</span>
</li>
</ol>
</nav>Verwandte Komponenten
Breadcrumb-Navigationskomponente
Eine reaktionsschnelle Breadcrumb-Navigationskomponente in einem brutalistischen Stil mit einem lebendigen Farbschema für Dashboards und Unterstützung für den Dunkelmodus.
Neumorphism-Breadcrumb-Navigationskomponente
Neumorphism Breadcrumb Navigationskomponente für Blog/Inhalte mit Unterstützung für den Dunkelmodus