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.

107

<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

Author:
Sophia Baker

1 year ago

17.7k
Navbar compoent

Author:
Amit Pachange

1 year ago

13.7k
New Nav Component
A new navigation component

Author:
Amit PR

8 months ago

2.3k
Navbar
E-commerce Navbar

Author:
Aman kumar

8 months ago

2.4k
Tailwind css navigation header
Tailwind css navigation header

Author:
Abid Ullah

4 months ago

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

Author:
inbarajan P

4 months ago

1k
navigation header
responsive navigation header

Author:
Abid Ullah

4 months ago

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

Author:
Muhammad Rizqi Juniyanto

3 months ago

905
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

Author:
Ameth Galarcio

2 months ago

1k
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.

Author:
Coastal UI

1 month ago

731
animated navigation bar

Author:
Md. Tofayel islam

3 weeks ago

127
NavBar

Author:
Samuel Abera

2 weeks ago

176

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components