Componenti Navigazione breadcrumb Componente di navigazione breadcrumb

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.

Anteprima

Codice HTML

<div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
                    <img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
                </div>
            </li>
        </ol>
    </nav>
</div>

Componenti correlati

Componente di navigazione breadcrumb

Un componente di navigazione Breadcrumb reattivo progettato con lo stile Glassmorphism e i colori del tono della terra, perfetto per i siti Web aziendali professionali. Supporta il tema scuro e include funzionalità interattive per la navigazione.

Aperto

Componente di navigazione breadcrumb

Componente di navigazione breadcrumb con design Skeuomorphism, combinazione di colori monocromatica e complessità semplice per lo scopo del dashboard, con tema scuro

Aperto

Componente di navigazione breadcrumb

Un componente di navigazione breadcrumb reattivo progettato in stile brutalista con una combinazione di colori vivaci per i cruscotti, con supporto per la modalità scura.

Aperto