Glassmorphism Breadcrumb
Navigazione breadcrumb Glassmorphism reattiva con modalità scura.
Codice HTML
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
<svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
</svg>
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
</div>
</li>
</ol>
</nav>Componenti correlati
Componente di navigazione breadcrumb
Un componente di navigazione Breadcrumb reattivo che utilizza lo stile di progettazione Neumorphism con una combinazione di colori pastello e supporto per temi scuri, creato utilizzando Tailwind CSS.
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb reattivo che utilizza Tailwind CSS con uno stile di progettazione glassmorphism. Presenta uno sfondo sfocato simile al vetro, supporta il tema scuro e include immagini segnaposto.
Navigazione a briciole di pane brutalista
Un componente di navigazione breadcrumb di ispirazione brutalista per i sistemi di prenotazione, caratterizzato da contrasto elevato, bianco e nero con un colore d'accento brillante e piena reattività con supporto della modalità scura. Ogni passaggio è chiaramente delineato con una tipografia in grassetto e un separatore univoco.