Componenti Navigazione breadcrumb Componente di navigazione breadcrumb

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.

Anteprima

Codice HTML

<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
    <ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
        </li>
    </ol>
</nav>

<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
    <span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>

Componenti correlati

Navigazione a briciole di pane brutalista

Un componente di navigazione breadcrumb di ispirazione brutalista per i sistemi di prenotazione, caratterizzato da contrasto elevato, bianco e nero con un colore d'accento brillante e piena reattività con supporto della modalità scura. Ogni passaggio è chiaramente delineato con una tipografia in grassetto e un separatore univoco.

Aperto

Paper_Jewel_Tone_Breadcrumb_Navigation

Un complesso componente di navigazione breadcrumb ispirato alla carta/stampa con toni gioiello, adatto per siti Web di consulenza/servizi. Presenta elementi ricchi e interattivi e supporta la piena reattività e la modalità scura.

Aperto

Componente di navigazione breadcrumb

Componente di navigazione breadcrumb con design Skeuomorphism, effetti reattivi e supporto per temi scuri.

Aperto