Breadcrumb-Navigationskomponente
Eine reaktionsschnelle Breadcrumb-Navigationskomponente, die im Glassmorphism-Stil und in Erdtönen entwickelt wurde und sich perfekt für professionelle Unternehmenswebsites eignet. Es unterstützt dunkles Design und enthält interaktive Funktionen für die 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>Verwandte Komponenten
Breadcrumb-Navigationskomponente
Eine komplexe, monochromatische Breadcrumb-Navigationskomponente, die für Portfolios entwickelt wurde, mit Benutzeroberfläche im Dunkelmodus und voller Reaktionsfähigkeit.
Breadcrumb-Navigationskomponente
Responsive Breadcrumb-Navigationskomponente im Stil von Material Design und Tailwind CSS, mit Unterstützung für dunkle Themen und einem triadischen Farbschema.
Breadcrumb-Navigationskomponente
Breadcrumb-Navigationskomponente mit Retro-/Vintage-Design, lebendigem Farbschema und einfacher Komplexitätsstufe für Blog-/Content-Zwecke.