Навигационная цепочка для электронной коммерции - фиолетовый цвет, вдохновленный бумагой/печатью
Простой, отзывчивый навигационный компонент навигационной цепочки, разработанный для электронной коммерции, отличается эстетикой, вдохновленной бумагой/печатью, с фиолетово-фиолетовой цветовой гаммой. Включает поддержку темного режима.
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>Связанные компоненты
Earth_Tones_Gradient_Breadcrumb_Navigation
Сложный, отзывчивый навигационный компонент, разработанный для новостных/журналистских веб-сайтов, с переходами с землистым градиентом и полной поддержкой темного режима.
Компонент навигации по цепочке навигации
Адаптивный компонент навигации по хлебной цепочке, использующий Tailwind CSS со стилем дизайна glassmorphism. Имеет размытый фон, похожий на стекло, поддерживает темную тему и включает замещающие изображения.
Компонент навигации по цепочке навигации
Адаптивный навигационный компонент навигационной цепочки, стилизованный под Material Design и Tailwind CSS, с поддержкой темных тем и триадической цветовой схемой.