Animated navigation with Tailwind CSS and Apinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. It is responsive.

Header Navigations

Author Michael Andreuzza

Tailwind v3.4 5.8k 17

Fork Fullscreen

<section x-data="{ atTop: true }">
 
 <div class="fixed z-50 w-full px-8 py-4 transition-all duration-1000 rounded-full mt-4 max-w-2xl inset-x-0 mx-auto ease-in-out transform" :class="{ 'bg-black bg-opacity-90 backdrop-blur-xl max-w-4xl ': !atTop, 'max-w-2xl': atTop }" @scroll.window="atTop = (window.pageYOffset > 50 ? false : true)">
  
  <div x-data="{ open: false }" class="flex flex-col w-full p-2 mx-auto md:items-center md:justify-between md:flex-row">
   
   <div class="flex flex-row items-center justify-between"> <span class="font-bold tracking-tighter text-black uppercase" :class="{ 'text-black': atTop, 'text-white': !atTop }">
     
     ✺ Lexington
    </span> <button class="md:hidden focus:outline-none">
     
    </button> </div>
   <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow gap-8 hidden pb-4 md:pb-0 md:flex md:flex-row lg:ml-auto justify-end">
     <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">About</a>  <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">Work</a> <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">Blog</a>
   </nav>
  </div>
 </div>
 <div class="bg-white">
  <div class="px-8 py-24 mx-auto text-center md:px-12 lg:px-24 lg:pt-64 text-zinc-500">
   <p class="max-w-xl mx-auto text-4xl text-black font-medium uppercase">
    Scroll to see effect
   </p>
   
   <div class="grid grid-cols-1 gap-8 mx-auto gap-y-28 mt-24 sm:grid-cols-1 max-w-2xl"> <a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/eb/b3/bd/ebb3bd6c322463cee8b7b17659792830.jpg"> </div>
    </a><a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/9b/0e/e1/9b0ee1146eba537b5b1e207928350e0f.jpg"> </div>
    </a><a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/b6/91/52/b691526e863a332d1708eb1d9da0d403.jpg"> </div>
    </a> </div>
  </div>
 </div> 
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to create an adaptable navigation with Astro, Tailwind CSS, and Alpine.js
     </p>
     <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
       by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-an-animated-navigation-with-alpine-js" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/adaptable-navigation/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div> 
</section>

Resources1× 0.5× 0.25×Rerun

Related Examples

New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.5k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Collapsible Sidebar Menu

Rajesh Maheshwari

1 year ago

3.5k
Navbar with sub menus

Rajesh Maheshwari

1 year ago

3.6k
Responsive Navbar with search profile options

Rajesh Maheshwari

1 year ago

2.6k
Basic sidebar

Rajesh Maheshwari

1 year ago

2.7k
Admin panel with collapsible menus

Rajesh Maheshwari

1 year ago

6.5k
Sidebar with only icons

Rajesh Maheshwari

1 year ago

2.8k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Abdul Baset Bappy

1 year ago

2.5k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Rathanak Phan

1 year ago

1.5k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.3k