Componentes Navegación de migas de pan Navegación de migas de pan brutalistas

Navegación de migas de pan brutalistas

Un componente de navegación de migas de pan inspirado en el brutalismo para sistemas de reservas/reservas, con alto contraste, blanco y negro con un color de acento brillante y capacidad de respuesta total con soporte para modo oscuro. Cada paso está claramente delineado con una tipografía en negrita y un separador único.

Vista previa

Código HTML

<nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>

Componentes relacionados

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

Un componente de navegación de migas de pan simple y receptivo con una estética retro/vintage, utilizando tonos azules corporativos, diseñado para plataformas educativas. Incluye soporte para modo oscuro.

Abrir

Componente de navegación de ruta de navegación

Componente de navegación de migas de pan con diseño de skeuomorfismo, efectos responsivos y compatibilidad con temas oscuros.

Abrir

Paper_Jewel_Tone_Breadcrumb_Navigation

Un complejo componente de navegación de migas de pan inspirado en papel / impresión con tonos joya, adecuado para sitios web de consultoría / servicios. Cuenta con elementos ricos e interactivos y admite una capacidad de respuesta completa y el modo oscuro.

Abrir