E-commerce Breadcrumb Navigation - Imprimé Inspiré Violet
Un composant de navigation simple et réactif conçu pour le commerce électronique, avec une esthétique inspirée du papier/de l’impression avec une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.
HTML Code
<nav class='bg-white dark:bg-gray-800 p-4 shadow-md sm:rounded-lg border border-gray-200 dark:border-gray-700 font-sans' aria-label='Breadcrumb'>
<ol class='flex flex-wrap items-center space-x-2 sm:space-x-4'>
<li>
<a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
Home
</a>
</li>
<li class='flex items-center'>
<svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
<path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
</svg>
<a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
Category
</a>
</li>
<li class='flex items-center'>
<svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
<path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
</svg>
<a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
Subcategory
</a>
</li>
<li class='flex items-center' aria-current='page'>
<svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
<path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' />
</svg>
<span class='text-gray-500 dark:text-gray-400 text-sm sm:text-base font-semibold whitespace-nowrap'>Current Product Page</span>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb inspiré du Material Design pour les tableaux de bord, utilisant un schéma de couleurs en niveaux de gris et des interactions complexes, implémenté avec Tailwind CSS pour la réactivité et la prise en charge des thèmes sombres.
Paper_Jewel_Tone_Breadcrumb_Navigation
Un composant de navigation complexe, inspiré du papier/de l’imprimé, aux tons de bijoux, adapté aux sites de conseil/services. Il comporte des éléments riches et interactifs et prend en charge une réactivité totale et le mode sombre.
Bauhaus_Music_Breadcrumb
Un simple composant de navigation inspiré du Bauhaus pour les plates-formes musicales/audio, avec des tons bleus d’entreprise et une réactivité totale avec la prise en charge du mode sombre.