Breadcrumb Navigation Component
A responsive breadcrumb navigation component designed in the Neumorphism style, supporting dark mode, created using Tailwind CSS.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
<ol class="list-reset flex items-center space-x-2">
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Home
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Category
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<span class="text-gray-400 dark:text-gray-600">
Sub-category
</span>
</li>
</ol>
</nav>
<style>
/* Neumorphism Styling */
.bg-white {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}
.dark .bg-gray-800 {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
}
a {
transition: all 0.3s ease;
}
</style>Related Components
Paper_Jewel_Tone_Breadcrumb_Navigation
A complex, paper/print-inspired breadcrumb navigation component with jewel tones, suitable for consulting/services websites. It features rich, interactive elements and supports full responsiveness and dark mode.
Brutalist Breadcrumb Navigation
A brutalist-inspired breadcrumb navigation component for booking/reservation systems, featuring high contrast, black and white with a bright accent color, and full responsiveness with dark mode support. Each step is clearly delineated with bold typography and a unique separator.
Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation
A simple, responsive breadcrumb navigation component with a retro/vintage aesthetic, using corporate blue tones, designed for educational platforms. Includes dark mode support.