Home
Cristian
Apple Dock Navigation Bar

Apple Dock Navigation Bar

This tailwind example is contributed by Cristian, on 09-Jan-2025. Component is made with Tailwind CSS v3.

1.9k

<section class="fixed bottom-10 inset-x-0 flex justify-center">
    <ul class="flex space-x-4">
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be92ee5ddf0080fb90_notion.png" alt="Notion app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Notion
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bef9d004f8a9cf3b29_asana.png" alt="Asana app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Asana
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be8c099d4e1ed55770_slack.png" alt="Slack app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Slack
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be5b31ba243e4da377_loom.png" alt="Loom app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Loom
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea97e140677496dae_spotify.png" alt="Spotify app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Spotify
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea73fcc6ee568f6f0_webflow.png" alt="Webflow app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Webflow
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bdf9d004f8a9cf3b09_adobe-illustrator.png" alt="Adobe Illustrator app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Adobe Illustrator
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1aaa_figma.png" alt="Figma app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Figma
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1a86_adobe-photoshop.png" alt="Photoshop app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Photoshop
        </div>
      </li>
      
      <li class="group relative flex items-center justify-center w-20 transition-all duration-500 hover:w-32">
        <a href="#" class="pointer-events-auto flex items-center justify-center w-full h-full">
          <img src="https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be051d32942a7aa31e_adobe-premierepro.png" alt="Premiere Pro app icon" class="w-full object-contain">
        </a>
        <div class="absolute top-0 transform -translate-y-full bg-gray-100 text-gray-800 text-sm rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-all duration-500">
          Premiere Pro
        </div>
      </li>
    </ul>
  </section>
</body>

Related Examples