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.
Codice HTML
<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
<ol class="list-reset flex">
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
</li>
</ol>
</nav>
<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>Componenti correlati
E-commerce Breadcrumb Navigation - Carta/Stampa Ispirata Viola
Un componente di navigazione breadcrumb semplice e reattivo progettato per l'e-commerce, caratterizzato da un'estetica ispirata alla carta/stampa con una combinazione di colori viola/viola. Include il supporto per la modalità oscura.
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
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb CSS Tailwind con supporto per la modalità scura.