Componentes de búsqueda

Categorías

Componentes Barra de navegación

Barra de navegación

Por lo general, se encuentra en la parte superior de la página, que contiene enlaces principales

Barra de navegación Skeuomorphic

Un componente de barra de navegación responsivo diseñado en un estilo skeuomórfico con soporte de temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Logo" class="h-10 rounded-full">
            <span class="text-xl font-bold dark:text-white">Brand</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-gray-200 p-2 rounded-lg focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden">
        <div class="flex flex-col space-y-1 mt-2">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
    </div>
</nav>

Componente de la barra de navegación 47

Una barra de navegación receptiva con un estilo de diseño 3D, que incorpora profundidad y compromiso, que admite el tema oscuro.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

Componente de la barra de navegación 16

Un componente de barra de navegación de diseño plano minimalista con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Brand</a>
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden md:flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-700"
        />
      </div>
      <div class="-mr-2 flex md:hidden">
        <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800"> 
          <svg class="h-6 w-6" 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="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Services</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
  </div>
</nav>