CCHub Logo CCHub Tailwind Collection
Komponenten Breadcrumb-Navigation E-Commerce Breadcrumb Navigation - Papier/Print inspiriert Lila

E-Commerce Breadcrumb Navigation - Papier/Print inspiriert Lila

Eine einfache, reaktionsschnelle Breadcrumb-Navigationskomponente, die für den E-Commerce entwickelt wurde und eine von Papier/Druck inspirierte Ästhetik mit einem violetten/violetten Farbschema aufweist. Enthält Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Glasmorphismus Breadcrumb

Responsive Glassmorphism-Breadcrumb-Navigation mit Dunkelmodus.

Offen

Monospace_Developer_Breadcrumb_Navigation

Eine reaktionsschnelle Breadcrumb-Navigationskomponente mit einer Monospace-/Entwickler-Ästhetik und einem Retro-/Vintage-Farbschema, die für Dokumentations- und Wiki-Seiten entwickelt wurde. Enthält Unterstützung für den Dunkelmodus.

Offen

Earth_Tones_Gradient_Breadcrumb_Navigation

Eine komplexe, reaktionsschnelle Breadcrumb-Navigationskomponente, die für Nachrichten-/Journalismus-Websites entwickelt wurde, mit erdigen Farbverlaufsübergängen und vollständiger Unterstützung des Dunkelmodus.

Offen