Home
Anonymous
Navigation multimenu

Navigation multimenu

navigation menu, multimenu

This tailwind example is contributed by Anonymous, on 01-Aug-2023. Component is made with Tailwind CSS v3. It is responsive.

Navigations

Author Anonymous

11.3k

15

Fork Fullscreen

<script src="//unpkg.com/alpinejs"></script>
  <nav x-data="{
navigationMenuOpen: false,
navigationMenu: '',
navigationMenuCloseDelay: 200,
navigationMenuCloseTimeout: null,
navigationMenuLeave() {
let that = this;
this.navigationMenuCloseTimeout = setTimeout(() => {
that.navigationMenuClose();
}, this.navigationMenuCloseDelay);
},
navigationMenuReposition(navElement) {
this.navigationMenuClearCloseTimeout();
this.$refs.navigationDropdown.style.left = navElement.offsetLeft + 'px';
this.$refs.navigationDropdown.style.marginLeft = (navElement.offsetWidth/2) + 'px';
},
navigationMenuClearCloseTimeout(){
clearTimeout(this.navigationMenuCloseTimeout);
},
navigationMenuClose(){
this.navigationMenuOpen = false;
this.navigationMenu = '';
}
}"
class="relative z-10 w-auto">
<div class="relative">
<ul class="flex items-center justify-center flex-1 p-1 space-x-1 list-none border rounded-md text-neutral-700 group border-neutral-200/80">
<li>
<button
:class="{ 'bg-neutral-100' : navigationMenu=='getting-started', 'hover:bg-neutral-100' : navigationMenu!='getting-started' }" @mouseover="navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='getting-started'" @mouseleave="navigationMenuLeave()" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none group w-max">
<span>Getting started</span>
<svg :class="{ '-rotate-180' : navigationMenuOpen==true && navigationMenu == 'getting-started' }" class="relative top-[1px] ml-1 h-3 w-3 ease-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</li>
<li>
<button
:class="{ 'bg-neutral-100' : navigationMenu=='learn-more', 'hover:bg-neutral-100' : navigationMenu!='learn-more' }" @mouseover="navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='learn-more'" @mouseleave="navigationMenuLeave()" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-neutral-100 group w-max">
<span>Learn More</span>
<svg :class="{ '-rotate-180' : navigationMenuOpen==true && navigationMenu == 'learn-more' }" class="relative top-[1px] ml-1 h-3 w-3 ease-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</li>
<li>
<a href="#_" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-neutral-100 group w-max">
Documentation
</a>
</li>
</ul>
</div>
<div x-ref="navigationDropdown" x-show="navigationMenuOpen"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90"
@mouseover="navigationMenuClearCloseTimeout()" @mouseleave="navigationMenuLeave()"
class="absolute top-0 pt-3 duration-200 ease-out -translate-x-1/2 translate-y-11" x-cloak>
<div class="flex justify-center w-auto h-auto overflow-hidden bg-white border rounded-md shadow-sm border-neutral-200/70">
<div x-show="navigationMenu == 'getting-started'" class="flex items-stretch justify-center w-full max-w-2xl p-6 gap-x-3">
<div class="flex-shrink-0 w-48 rounded pt-28 pb-7 bg-gradient-to-br from-neutral-800 to-black">
<div class="relative px-7 space-y-1.5 text-white">
<svg class="block w-auto h-9" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M67.683 89.217h44.634l30.9 53.218H36.783l30.9-53.218Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M77.478 120.522h21.913v46.956H77.478v-46.956Zm-34.434-29.74 45.59-78.26 46.757 78.26H43.044Z" fill="currentColor"/></svg>
<span class="block font-bold">Pines UI</span>
<span class="block text-sm opacity-60">An Alpine and Tailwind UI library</span>
</div>
</div>
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Introduction</span>
<span class="block font-light leading-5 opacity-50">Re-usable elements built using Alpine JS and Tailwind CSS.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">How to use</span>
<span class="block leading-5 opacity-50">Couldn't be easier. It's is as simple as copy, paste, and preview.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Contributing</span>
<span class="block leading-5 opacity-50">Feel free to contribute your expertise. All these elements are open-source.</span>
</a>
</div>
</div>
<div x-show="navigationMenu == 'learn-more'" class="flex items-stretch justify-center w-full p-6">
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Tailwind CSS</span>
<span class="block font-light leading-5 opacity-50">A utility first CSS framework for building amazing websites.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Laravel</span>
<span class="block font-light leading-5 opacity-50">The perfect all-in-one framework for building amazing apps.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Pines UI</span>
<span class="block leading-5 opacity-50">An Alpine JS and Tailwind CSS UI library for awesome people. </span>
</a>
</div>
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">ApineJS</span>
<span class="block font-light leading-5 opacity-50">A framework without the complex setup or heavy dependencies.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Livewire</span>
<span class="block leading-5 opacity-50">A seamless integration of server-side and client-side interactions.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Tails</span>
<span class="block leading-5 opacity-50">The ultimate Tailwind CSS design tool that helps you craft beautiful websites.</span>
</a>
</div>
</div>
</div>
</div>
</nav>

Related Examples

Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

20.5k
Navbar compoent

Author:
Amit Pachange

2 years ago

16.2k
Tab navigation with alpine JS

Author:
Mr Robot

3 years ago

17.1k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

2 years ago

8.9k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.4k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

11.9k
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!

Author:
Abdul Baset Bappy

7 months ago

1.7k
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

Author:
SHARIFUL ISLAM

8 months ago

724
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

9 months ago

1.6k
animated navigation bar

Author:
Md. Tofayel islam

10 months ago

2.1k
Sidebar with only icons

Author:
Rajesh Maheshwari

8 months ago

1.6k
Heade With Hero Section

Author:
Abdul Baset Bappy

4 months ago

823

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12