Navegación de migas de pan

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo diseñado en un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.

Abrir vista previa

                <nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <ol class="list-reset flex text-sm text-white">
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Home
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Dashboard
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Analytics
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="text-gray-600 dark:text-gray-400">Current Page</li>
    </ol>
</nav>

<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
    <h2 class="text-xl text-white font-bold">
        Breadcrumb Navigation in Brutalism Style
    </h2>
    <p class="text-gray-400 dark:text-gray-300">
        Use the breadcrumbs above to navigate through the dashboard.
    </p>
    <div class="mt-4">
        <img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
    </div>
    <div class="mt-4">
        <h3 class="text-lg text-white">Team Members</h3>
        <div class="flex space-x-4 mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
        </div>
    </div>
</div>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo que utiliza el estilo de diseño Neumorphism con un esquema de color pastel y soporte para temas oscuros, creado con Tailwind CSS.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
  <ol class="list-reset flex">
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
    </li>
  </ol>
</nav>

<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
  <p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
    <span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
  </div>
</div>

Componente de navegación de migas de pan de neumorfismo

Componente de navegación de migas de pan de neumorfismo para blog/contenido con soporte para modo oscuro

Abrir vista previa

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 011-1h2a1 1 0 011 1v3h1V9.414l-7-7a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300">Projects</a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300" aria-current="page">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

Componente de navegación de ruta de navegación

Componente de navegación de migas de pan con diseño retro / vintage, combinación de colores vibrantes y nivel de complejidad simple, para fines de blog / contenido.

Abrir vista previa

                <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="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="ml-1 text-sm font-medium text-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="ml-1 text-sm font-medium text-purple-500 md:ml-2 dark:text-gray-500">This Article</span>
      </div>
    </li>
  </ol>
</nav>

Migas de pan de glassmorphism

Navegación de migas de pan Glassmorphism responsiva con modo oscuro.

Abrir vista previa

                <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-400 dark:hover:text-white">
        <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan responsivo diseñado con un estilo plano minimalista, adecuado para blogs y consumo de contenido. Incluye elementos interactivos para facilitar la navegación y es compatible con el modo oscuro.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <ol class="list-none flex space-x-4">
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
    </li>
  </ol>
</nav>

<div class="mt-4 space-y-2">
  <div class="flex items-center space-x-2">
    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
    <span class="text-gray-800 dark:text-gray-200">Author Name</span>
  </div>
  <p class="text-gray-600 dark:text-gray-400">
    This is a brief description meant for content consumption. It should be concise and engaging.
  </p>
</div>

<div class="flex items-center mt-4">
  <img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo diseñado con estilo Glassmorphism y colores de tono tierra, perfecto para sitios web de empresas profesionales. Es compatible con el tema oscuro e incluye funciones interactivas para la navegación.

Abrir vista previa

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

Componente de navegación de ruta de navegación

Componente de navegación de migas de pan responsivo con diseño de materiales y CSS de viento de cola, con soporte para temas oscuros y un esquema de color triádico.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-800 shadow-md rounded p-4 mb-6">
    <ol class="list-reset flex text-gray-600 dark:text-gray-300 text-sm font-semibold">
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Home</a>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Blog</a>
            <span class="mx-2">/</span>
        </li>
        <li class="text-gray-500 dark:text-gray-400">Post Title</li>
    </ol>
</nav>

<section class="bg-white dark:bg-gray-800 p-5 rounded shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
        Post Title
    </h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
            Written by <span class="font-semibold">Author Name</span> on <span class="font-semibold">June 1, 2023</span>
        </p>
    </div>
    <img src="https://picsum.photos/800/400" alt="Blog Post Image" class="w-full rounded mb-4 shadow">
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Welcome to the blog post content. This is where you can include your text... 
    </p>
</section>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan inspirado en Material Design para paneles, que utiliza un esquema de color en escala de grises e interacciones complejas, implementado con Tailwind CSS para brindar capacidad de respuesta y compatibilidad con temas oscuros.

Abrir vista previa

                <nav class="flex flex-col md:flex-row items-center justify-between bg-white dark:bg-gray-800 shadow-md p-4 rounded-lg" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H5v-7.586l.293-.293L10 2.414l5.707 5.707.293.293V15a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-7.586l.293.293 2 2a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Dashboard
      </a>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-300">Settings</span>
      </div>
    </li>
    </ul>
     <div class="flex items-center space-x-3 rtl:space-x-reverse mt-4 md:mt-0">
        <button type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" >
             <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            <span class="sr-only">Info</span>
        </button>
        <button type="button" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">
            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9v1a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Zm4 0v1a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Z"/>
            </svg>
            Action
        </button>
     </div>
</nav>

Componente de navegación de ruta de navegación

Componente de navegación de migas de pan con diseño de skeuomorfismo, combinación de colores monocromática y complejidad simple para fines de tablero, con tema oscuro

Abrir vista previa

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Projects</a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

Categorías