组件 痕迹导航 电子商务面包屑导航 - 纸张/印刷灵感紫色

电子商务面包屑导航 - 纸张/印刷灵感紫色

一个专为电子商务设计的简单响应式痕迹导航组件,具有受纸张/印刷启发的美感和紫色/紫色配色方案。包括深色模式支持。

预览

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>

相关组件

Monospace_Developer_Breadcrumb_Navigation

一个响应式痕迹导航组件,具有等宽/开发人员美学和复古/复古配色方案,专为文档和 Wiki 站点设计。包括深色模式支持。

打开

面包屑导航组件

一个响应式面包屑导航组件,采用Neumorphism风格设计,支持暗模式,使用Tailwind CSS创建。

打开

有趣的 Breadcrumb 导航组件

一个有趣且引人入胜的痕迹导航组件,专为教育平台设计,具有鲜艳的色彩、圆润的元素和高对比度,易于阅读。它支持深色模式并且完全响应。

打开