Breadcrumb Navigation Component
A responsive Breadcrumb Navigation Component designed with Neumorphism style using Tailwind CSS, with support for dark theme.
HTML Code
<nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
<ol class="list-reset flex text-gray-700 dark:text-gray-300">
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
</li>
<li>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
</li>
<li>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
</li>
</ol>
</nav>
<style>
/* Neumorphism styles */
nav {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.7);
}
nav.dark {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
-8px -8px 15px rgba(0, 0, 0, 0.2);
}
</style>Related Components
Breadcrumb Navigation Component
A responsive breadcrumb navigation component designed with a minimalist flat style, suitable for blogs and content consumption. It includes interactive elements for easy navigation and supports dark mode.
Breadcrumb Navigation Component
Breadcrumb Navigation Component with Skeuomorphism design, Monochromatic color scheme, and Simple complexity for Dashboard purpose, with dark theme
Breadcrumb Navigation Component
Breadcrumb Navigation Component with Retro/Vintage design, Vibrant color scheme, and Simple complexity level, for Blog/Content purpose.