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

Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.

Abrir

Componente de navegación de migas de pan lúdico

Un componente de navegación de migas de pan divertido y atractivo diseñado para plataformas educativas, con colores brillantes, elementos redondeados y alto contraste para facilitar la legibilidad. Es compatible con el modo oscuro y es totalmente responsivo.

Abrir