E-commerce Breadcrumb Navigation - Papel/Impresión Inspirado en el Púrpura
Un componente de navegación de migas de pan simple y receptivo diseñado para el comercio electrónico, con una estética inspirada en el papel/impresión con un esquema de color púrpura/violeta. Incluye soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo que utiliza el estilo de diseño Neumorphism con un esquema de color pastel y soporte para temas oscuros, creado con Tailwind CSS.
Componente de navegación de ruta de navegación
Componente de navegación de migas de pan responsivo con diseño de materiales y CSS de viento de cola, con soporte para temas oscuros y un esquema de color triádico.
Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation
Un componente de navegación de migas de pan simple y receptivo con una estética retro/vintage, utilizando tonos azules corporativos, diseñado para plataformas educativas. Incluye soporte para modo oscuro.