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
Monospace_Developer_Breadcrumb_Navigation
Un componente de navegación de migas de pan receptivo con una estética monoespaciada / de desarrollador y un esquema de color retro / vintage, diseñado para sitios de documentación y wiki. Incluye soporte para modo oscuro.
Componente de navegación de ruta de navegación
Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.
Componente de navegación de ruta de navegación
Componente de navegación de migas de pan con diseño de skeuomorfismo, efectos responsivos y compatibilidad con temas oscuros.