Componente di navigazione breadcrumb
Componente di navigazione breadcrumb con design Skeuomorphism, combinazione di colori monocromatica e complessità semplice per lo scopo del dashboard, con tema scuro
Codice HTML
<nav aria-label="Breadcrumb" class="flex">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500">
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Projects</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
</svg>
<a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Project Nero</a>
</div>
</li>
</ol>
</nav>Componenti correlati
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 ispirato al Material Design per le dashboard, che utilizza una combinazione di colori in scala di grigi e interazioni complesse, implementato con Tailwind CSS per la reattività e il supporto del tema scuro.
RetroImmobiliareBriciola di Pane
Un componente di navigazione breadcrumb semplice e reattivo in stile retrò/vintage con colori autunnali, adatto per gli annunci di proprietà immobiliari, incluso il supporto della modalità oscura.