Breadcrumb Navigation Component
A responsive Breadcrumb Navigation Component designed with Glassmorphism style and Earth tone colors, perfect for professional company websites. It supports dark theme and includes interactive features for navigation.
HTML Code
<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
<ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
</li>
</ol>
</nav>
<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>Related Components
Bauhaus_Music_Breadcrumb
A simple Bauhaus-inspired breadcrumb navigation component for music/audio platforms, featuring corporate blue tones and full responsiveness with dark mode support.
Breadcrumb Navigation Component
Responsive Breadcrumb Navigation Component styled with Material Design and Tailwind CSS, featuring dark theme support and a triadic color scheme.
Monospace_Developer_Breadcrumb_Navigation
A responsive breadcrumb navigation component with a monospace/developer aesthetic and a retro/vintage color scheme, designed for documentation and wiki sites. Includes dark mode support.