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 reaktionsschnelle Breadcrumb-Navigationskomponente, die Tailwind CSS mit einem Glassmorphism-Designstil verwendet. Verfügt über einen verschwommenen, glasähnlichen Hintergrund, unterstützt dunkles Design und enthält Platzhalterbilder.
Breadcrumb-Navigationskomponente
Eine reaktionsschnelle Breadcrumb-Navigationskomponente, die den Neumorphism-Designstil mit einem pastellfarbenen Schema und Unterstützung für dunkle Themen verwendet und mit Tailwind CSS erstellt wurde.