Apple Dock Navigation Bar

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

Tailwind v3.4 3.1k 3

<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

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.9k
Navbar compoent

Amit Pachange

3 years ago

17.4k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.3k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.7k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

4k
animated navigation bar

Md. Tofayel islam

1 year ago

3.2k
NavBar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3k