Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb complesso e monocromatico progettato per i portfolio, con interfaccia utente in modalità scura e reattività completa.
Codice HTML
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gray-900 dark:bg-gray-800 p-3 rounded-lg shadow-lg">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white transition-colors duration-200">
<svg class="w-4 h-4 me-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="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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="ms-1 text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white md:ms-2 transition-colors duration-200">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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="ms-1 text-sm font-medium text-gray-200 dark:text-gray-400 md:ms-2">Web Development</span>
</div>
</li>
<li aria-current="page" class="hidden sm:inline-flex">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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="ms-1 text-sm font-medium text-gray-200 dark:text-gray-400 md:ms-2">E-commerce Platform</span>
</div>
</li>
</ol>
</nav>Componenti correlati
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.
Earth_Tones_Gradient_Breadcrumb_Navigation
Un componente di navigazione breadcrumb complesso e reattivo progettato per siti Web di notizie/giornalismo, con transizioni sfumate terrose e supporto completo per la modalità scura.