Componente di navigazione breadcrumb
Componente di navigazione breadcrumb con design Skeuomorphism, effetti reattivi e supporto per temi scuri.
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">
<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" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
<path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
<path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
</svg>
<a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
</div>
</li>
</ol>
</nav>
Componenti correlati
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb reattivo progettato nello stile Neumorphism, che supporta la modalità oscura, creato utilizzando Tailwind CSS.
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb CSS Tailwind con supporto per la modalità scura.
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.