Componenti Navigazione breadcrumb E-commerce Breadcrumb Navigation - Carta/Stampa Ispirata Viola

E-commerce Breadcrumb Navigation - Carta/Stampa Ispirata Viola

Un componente di navigazione breadcrumb semplice e reattivo progettato per l'e-commerce, caratterizzato da un'estetica ispirata alla carta/stampa con una combinazione di colori viola/viola. Include il supporto per la modalità oscura.

Anteprima

Codice 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>

Componenti correlati

Monospace_Developer_Breadcrumb_Navigation

Un componente di navigazione breadcrumb reattivo con un'estetica monospace/developer e una combinazione di colori retrò/vintage, progettato per la documentazione e i siti wiki. Include il supporto per la modalità oscura.

Aperto

Componente di navigazione breadcrumb

Un componente di navigazione breadcrumb reattivo che utilizza Tailwind CSS con uno stile di progettazione glassmorphism. Presenta uno sfondo sfocato simile al vetro, supporta il tema scuro e include immagini segnaposto.

Aperto

Componente di navigazione breadcrumb

Un componente di navigazione breadcrumb reattivo progettato nello stile Neumorphism, che supporta la modalità oscura, creato utilizzando Tailwind CSS.

Aperto