Composants Navigation par fil d’Ariane Composant de navigation du fil d’Ariane

Composant de navigation du fil d’Ariane

Un composant de navigation de fil d’Ariane réactif conçu avec le style Glassmorphism et les couleurs de ton Terre, parfait pour les sites Web d’entreprise professionnels. Il prend en charge le thème sombre et comprend des fonctionnalités interactives pour la navigation.

Aperçu

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>

Composants associés

Composant de navigation du fil d’Ariane

Un composant de navigation responsive breadcrumb conçu avec un style plat minimaliste, adapté aux blogs et à la consommation de contenu. Il comprend des éléments interactifs pour une navigation facile et prend en charge le mode sombre.

Ouvrir

Composant de navigation du fil d’Ariane

Un composant de navigation Breadcrumb réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre.

Ouvrir

Composant de navigation du fil d’Ariane

Un composant de navigation réactif conçu dans un style brutaliste avec une palette de couleurs vives pour les tableaux de bord, avec prise en charge du mode sombre.

Ouvrir