Componente di navigazione breadcrumb
Componente di navigazione breadcrumb con design retrò/vintage, combinazione di colori vivaci e livello di complessità semplice, per scopi di blog/contenuti.
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="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="#" class="ml-1 text-sm font-medium text-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="ml-1 text-sm font-medium text-purple-500 md:ml-2 dark:text-gray-500">This Article</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.
Componente di navigazione breadcrumb
Un componente di navigazione Breadcrumb reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, con supporto per il tema scuro.
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.