navigations
Tailwind CSS Navbar
The navbar component offers versatile options for displaying a list of navigation links at the top of your page, with various layout choices, sizes, and dropdown functionalities.
Class Name | Type | Description |
|---|---|---|
| navbar | Component | Base class for navbar container. |
| navbar-start | Component | Child element, fills 50% of width to be on start. |
| navbar-center | Component | Child element, fills remaining space to be on center. |
| navbar-end | Component | Child element, fills 50% of width to be on end. |
Basic navbar example with title only.
<nav class="navbar rounded-box flex w-full gap-2 shadow max-md:flex-col md:items-center">
<div class="flex w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-md:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
<div class="md:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#default-navbar-collapse" aria-controls="default-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="default-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-md:w-full">
<ul class="menu md:menu-horizontal gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Services</a></li>
<li><a href="javascript:void(0)">Contact us</a></li>
</ul>
</div>
</nav>Basic navbar example with title as logo.
<nav class="navbar rounded-box flex w-full gap-2 shadow max-md:flex-col md:items-center">
<div class="flex w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-md:w-full">
<a href="javascript:void(0)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.6745 16.9224L12.6233 10.378C12.2167 9.85117 11.4185 9.8611 11.0251 10.3979L6.45728 16.631C6.26893 16.888 5.96935 17.0398 5.65069 17.0398H3.79114C2.9635 17.0398 2.49412 16.0919 2.99583 15.4336L11.0224 4.90319C11.4206 4.38084 12.2056 4.37762 12.608 4.89668L20.9829 15.6987C21.4923 16.3558 21.024 17.3114 20.1926 17.3114H18.4661C18.1562 17.3114 17.8638 17.1677 17.6745 16.9224ZM12.5866 15.5924L14.8956 18.3593C15.439 19.0105 14.976 20 14.1278 20H9.74075C8.9164 20 8.4461 19.0586 8.94116 18.3994L11.0192 15.6325C11.4065 15.1169 12.1734 15.0972 12.5866 15.5924Z"
fill="oklch(var(--p))"
/></svg>
</a>
<div class="md:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#logo-navbar-collapse" aria-controls="logo-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="logo-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-md:w-full">
<ul class="menu md:menu-horizontal gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Careers</a></li>
</ul>
</div>
</nav>Below given example displays navbar with dropdown menu.
Please refer to the Dropdown documentation for more details on the dropdown plugin used in the Navbar component for the mega menu.
<nav class="navbar rounded-box flex w-full gap-2 shadow max-md:flex-col md:items-center">
<div class="flex max-md:w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-md:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
<div class="md:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#dropdown-navbar-collapse" aria-controls="dropdown-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="dropdown-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-md:w-full">
<ul class="menu md:menu-horizontal gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Services</a></li>
<li class="dropdown relative inline-flex [--auto-close:inside] [--offset:9] [--placement:bottom-end]">
<button id="dropdown-nav" type="button" class="dropdown-toggle dropdown-open:bg-base-content/10 dropdown-open:text-base-content" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Products
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-nav">
<li><a class="dropdown-item" href="javascript:void(0)">UI kits</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Templates</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Component library</a></li>
<hr class="border-base-content/25 -mx-2 my-3" />
<li><a class="dropdown-item" href="javascript:void(0)">Figma designs</a></li>
</ul>
</li>
</ul>
</div>
</nav>Below given example displays navbar with notifications indicator & user details avatar.
<nav class="navbar bg-base-100 rounded-box shadow">
<div class="flex flex-1 items-center">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-end flex items-center gap-4">
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-scrollable" type="button" class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10 size-10" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<div class="indicator">
<span class="indicator-item bg-error size-2 rounded-full"></span>
<span class="icon-[tabler--bell] text-base-content size-[1.375rem]"></span>
</div>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-scrollable">
<div class="dropdown-header justify-center">
<h6 class="text-base-content/90 text-base">Notifications</h6>
</div>
<div class="vertical-scrollbar horizontal-scroll rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-sm:max-w-60">
<div class="dropdown-item">
<div class="avatar away-bottom">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">Charles Franklin</h6>
<small class="text-base-content/50 truncate">Accepted your connection</small>
</div>
</div>
<div class="dropdown-item">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" alt="avatar 2" />
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">Martian added moved Charts & Maps task to the done board.</h6>
<small class="text-base-content/50 truncate">Today 10:00 AM</small>
</div>
</div>
<div class="dropdown-item">
<div class="avatar online-bottom">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png" alt="avatar 8" />
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">New Message</h6>
<small class="text-base-content/50 truncate">You have new message from Natalie</small>
</div>
</div>
<div class="dropdown-item">
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-10 rounded-full p-2">
<span class="icon-[tabler--user] size-full"></span>
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">Application has been approved 🚀</h6>
<small class="text-base-content/50 text-wrap">Your ABC project application has been approved.</small>
</div>
</div>
<div class="dropdown-item">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar 10" />
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">New message from Jane</h6>
<small class="text-base-content/50 text-wrap">Your have new message from Jane</small>
</div>
</div>
<div class="dropdown-item">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-3.png" alt="avatar 3" />
</div>
</div>
<div class="w-60">
<h6 class="truncate text-base">Barry Commented on App review task.</h6>
<small class="text-base-content/50 truncate">Today 8:32 AM</small>
</div>
</div>
</div>
<a href="javascript:void(0)" class="dropdown-footer justify-center gap-1">
<span class="icon-[tabler--eye] size-4"></span>
View all
</a>
</div>
</div>
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-scrollable" type="button" class="dropdown-toggle flex items-center" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<div class="avatar">
<div class="size-9.5 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-avatar">
<li class="dropdown-header gap-2">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" />
</div>
</div>
<div>
<h6 class="text-base-content/90 text-base font-semibold">John Doe</h6>
<small class="text-base-content/50">Admin</small>
</div>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--user]"></span>
My Profile
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--settings]"></span>
Settings
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--receipt-rupee]"></span>
Billing
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--help-triangle]"></span>
FAQs
</a>
</li>
<li class="dropdown-footer gap-2">
<a class="btn btn-error btn-soft btn-block" href="javascript:void(0)">
<span class="icon-[tabler--logout]"></span>
Sign out
</a>
</li>
</ul>
</div>
</div>
</nav>Below given example displays navbar with centered brand name.
<nav class="navbar rounded-box justify-between gap-4 shadow">
<div class="navbar-start">
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:9]">
<button id="dropdown-name" type="button" class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10 dropdown-open:text-base-content" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<span class="icon-[tabler--menu-2] size-5"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-name">
<li><a class="dropdown-item" href="javascript:void(0)">Link 1</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 2</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 3</a></li>
<hr class="border-base-content/25 -mx-2 my-3" />
<li><a class="dropdown-item" href="javascript:void(0)">Link 4</a></li>
</ul>
</div>
</div>
<div class="navbar-center flex items-center">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-end items-center gap-4">
<button class="btn btn-sm btn-text btn-circle size-[2.125rem]">
<span class="icon-[tabler--search] size-[1.375rem]"></span>
</button>
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-scrollable" type="button" class="dropdown-toggle flex items-center" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<div class="avatar">
<div class="size-9.5 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-avatar">
<li class="dropdown-header gap-2">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" />
</div>
</div>
<div>
<h6 class="text-base-content/90 text-base font-semibold">John Doe</h6>
<small class="text-base-content/50">Admin</small>
</div>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--user]"></span>
My Profile
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--settings]"></span>
Settings
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--receipt-rupee]"></span>
Billing
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--help-triangle]"></span>
FAQs
</a>
</li>
<li class="dropdown-footer gap-2">
<a class="btn btn-error btn-soft btn-block" href="javascript:void(0)">
<span class="icon-[tabler--logout]"></span>
Sign out
</a>
</li>
</ul>
</div>
</div>
</nav>Below given example displays navbar with search input.
<nav class="navbar bg-base-100 rounded-box gap-4 shadow">
<div class="navbar-start items-center">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-end flex items-center gap-4">
<button class="btn btn-sm btn-text btn-circle size-[2.125rem] sm:hidden">
<span class="icon-[tabler--search] size-[1.375rem]"></span>
</button>
<label class="input-group hidden max-w-56 rounded-full sm:flex">
<span class="input-group-text">
<span class="icon-[tabler--search] text-base-content/80 size-5"></span>
</span>
<input type="search" class="input grow rounded-e-full" placeholder="Search" />
</label>
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-scrollable" type="button" class="dropdown-toggle flex items-center" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<div class="avatar">
<div class="size-9.5 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-avatar">
<li class="dropdown-header gap-2">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" />
</div>
</div>
<div>
<h6 class="text-base-content/90 text-base font-semibold">John Doe</h6>
<small class="text-base-content/50">Admin</small>
</div>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--user]"></span>
My Profile
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--settings]"></span>
Settings
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--receipt-rupee]"></span>
Billing
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--help-triangle]"></span>
FAQs
</a>
</li>
<li class="dropdown-footer gap-2">
<a class="btn btn-error btn-soft btn-block" href="javascript:void(0)">
<span class="icon-[tabler--logout]"></span>
Sign out
</a>
</li>
</ul>
</div>
</div>
</nav>Below given example displays navbar with call to action button.
<nav class="navbar rounded-box flex w-full items-center justify-between gap-2 shadow">
<div class="navbar-start max-sm:w-1/4">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-center max-sm:hidden">
<ul class="menu menu-horizontal p-0 font-medium">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
<li><a href="javascript:void(0)">Link 3</a></li>
</ul>
</div>
<div class="navbar-end items-center gap-4">
<div class="dropdown relative inline-flex sm:hidden rtl:[--placement:bottom-end]">
<button id="dropdown-default" type="button" class="dropdown-toggle btn btn-text btn-secondary btn-square" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<span class="icon-[tabler--menu-2] dropdown-open:hidden size-5"></span>
<span class="icon-[tabler--x] dropdown-open:block hidden size-5"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-default">
<li><a class="dropdown-item" href="javascript:void(0)">Link 1</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 2</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 3</a></li>
</ul>
</div>
<a class="btn max-sm:btn-square btn-primary" href="javascript:void(0)">
<span class="max-sm:hidden">Get started</span>
<span class="icon-[tabler--arrow-right]"></span>
</a>
</div>
</nav>The example below demonstrates a responsive navbar that includes a hamburger menu for smaller screens.
<nav class="navbar rounded-box flex w-full gap-2 shadow max-md:flex-col md:items-center">
<div class="flex max-md:w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-md:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
<div class="md:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#navbar-collapse" aria-controls="navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="navbar-collapse" class="md:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-md:w-full">
<ul class="menu md:menu-horizontal gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
<li class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-link" type="button" class="dropdown-toggle dropdown-open:bg-base-content/10 dropdown-open:text-base-content" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Parent
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-link">
<li><a class="dropdown-item" href="javascript:void(0)">Link 3</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 4</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 5</a></li>
<hr class="border-base-content/25 -mx-2 my-3" />
<li><a class="dropdown-item" href="javascript:void(0)">Link 6</a></li>
</ul>
</li>
</ul>
</div>
</nav>The example below demonstrates a navbar with solid background.
<nav class="navbar bg-base-200 rounded-box flex w-full gap-2 max-sm:flex-col sm:items-center">
<div class="flex w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-sm:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
<div class="sm:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#solid-bg-navbar-collapse" aria-controls="solid-bg-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="solid-bg-navbar-collapse" class="sm:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-sm:w-full">
<ul class="menu sm:menu-horizontal flex-nowrap sm:gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
<li><a href="javascript:void(0)">Link 3</a></li>
</ul>
</div>
</nav>The example below demonstrates a sticky navbar.
<div class="relative h-72 w-full">
<!-- Sticky navbar -->
<nav class="navbar bg-base-100 md:h-15 absolute start-0 top-0 w-full gap-2 shadow max-md:flex-col z-[1]">
<div class="flex max-md:w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-md:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="md:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#sticky-navbar-collapse" aria-controls="sticky-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
<div id="sticky-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full overflow-hidden transition-[height] duration-300 max-md:w-full">
<ul class="menu md:menu-horizontal gap-2 p-0 text-base">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
<li class="dropdown relative inline-flex [--auto-close:inside] [--offset:10] [--placement:bottom-end]">
<button id="dropdown-sticky" type="button" class="dropdown-toggle dropdown-open:bg-base-content/10 dropdown-open:text-base-content" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Parent
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-sticky">
<li><a class="dropdown-item" href="javascript:void(0)">Link 3</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 4</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Link 5</a></li>
<hr class="border-base-content/25 -mx-2 my-3" />
<li><a class="dropdown-item" href="javascript:void(0)">Link 6</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Demo content -->
<div class="vertical-scrollbar top-15 absolute h-full w-full overflow-y-scroll pe-2 pt-4">
<div class="flex w-full flex-col gap-4">
<div class="mb-4 flex items-center gap-4">
<div class="skeleton h-16 w-16 rounded-full"></div>
<div class="flex flex-col gap-4">
<div class="skeleton h-4 w-52"></div>
<div class="skeleton h-4 w-52"></div>
</div>
</div>
<div class="skeleton mb-4 h-16 w-full"></div>
<div class="skeleton mb-4 h-32 w-full"></div>
</div>
</div>
</div>The example below demonstrates a navbar with multi level navigation using collapse.
<nav class="navbar rounded-box flex w-full gap-2 shadow max-sm:flex-col sm:items-center">
<div class="flex w-full items-center justify-between">
<div class="navbar-start items-center justify-between max-sm:w-full">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
<div class="sm:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#multilevel-navbar-collapse" aria-controls="multilevel-navbar-collapse" aria-label="Toggle navigation">
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
</div>
<div id="multilevel-navbar-collapse" class="sm:navbar-end collapse hidden grow basis-full gap-2 overflow-hidden transition-[height] duration-300 max-sm:w-full">
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end] max-sm:[--placement:bottom]">
<button id="nested-dropdown" type="button" class="dropdown-toggle btn btn-text text-base-content/80 dropdown-open:bg-base-content/10 dropdown-open:text-base-content/90 max-sm:px-2" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Pages
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 z-20 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-collapse">
<div>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--stack-front]"></span>
Landing page
</a>
</div>
<div>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--login]"></span>
Login page
</a>
</div>
<div>
<button id="nested-collapse-pages" class="collapse-toggle dropdown-item collapse-open:text-base-content/90 collapse-open:bg-base-content/10 justify-between" data-collapse="#nested-collapse-pages-content">
<span class="flex items-center gap-x-3.5">
<span class="icon-[tabler--users]"></span>
Users
</span>
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="nested-collapse-pages" id="nested-collapse-pages-content">
<ul class="py-3 ps-3">
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
User Details
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Teams
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Projects
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Connections
</a>
</li>
</ul>
</div>
</div>
<div>
<button id="nested-collapse-pages-2" class="collapse-toggle dropdown-item collapse-open:text-base-content/90 collapse-open:bg-base-content/10 justify-between" data-collapse="#nested-collapse-pages-content-2">
<span class="flex items-center gap-x-3.5">
<span class="icon-[tabler--user-pentagon]"></span>
Account settings
</span>
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="nested-collapse-pages-2" id="nested-collapse-pages-content-2">
<ul class="py-3 ps-3">
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Account
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Security
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Billing & plans
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Notifications
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Memberships
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="nested-dropdown" type="button" class="dropdown-toggle btn btn-text text-base-content/80 dropdown-open:bg-base-content/10 dropdown-open:text-base-content/90 max-sm:px-2" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Apps
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 z-20 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-collapse">
<div>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--brand-hipchat]"></span>
Chat
</a>
</div>
<div>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--mail]"></span>
Email
</a>
</div>
<div>
<button id="nested-collapse" class="collapse-toggle dropdown-item collapse-open:text-base-content/90 collapse-open:bg-base-content/10 justify-between" data-collapse="#nested-collapse-content">
<span class="flex items-center gap-x-3.5">
<span class="icon-[tabler--shopping-cart]"></span>
Ecommerce
</span>
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="nested-collapse" id="nested-collapse-content">
<ul class="py-3 ps-3">
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Dashboard
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Products
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Shipping
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Settings
</a>
</li>
</ul>
</div>
</div>
<div>
<button id="nested-collapse-2" class="collapse-toggle dropdown-item collapse-open:text-base-content/90 collapse-open:bg-base-content/10 justify-between" data-collapse="#nested-collapse-content-2">
<span class="flex items-center gap-x-3.5">
<span class="icon-[tabler--book]"></span>
Academy
</span>
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>
<div class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="nested-collapse-2" id="nested-collapse-content-2">
<ul class="py-3 ps-3">
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Dashboard
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Courses
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Course details
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--point]"></span>
Certificates
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>The example below demonstrates a navbar with multi level navigation using dropdown.
<div class="h-96 max-sm:h-[31.25rem]">
<nav class="navbar rounded-box shadow">
<div class="navbar-start">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-center max-sm:hidden">
<ul class="menu menu-horizontal gap-2 p-0 text-base rtl:ml-20">
<li class="dropdown relative inline-flex [--auto-close:inside] [--offset:9] [--placement:bottom-end] max-sm:[--placement:bottom]">
<button id="dropdown-end" type="button" class="dropdown-toggle dropdown-open:bg-base-content/10 dropdown-open:text-base-content max-sm:px-2" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Products
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Templates</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">UI kits</a></li>
<li class="dropdown relative [--auto-close:inside] [--offset:10] [--placement:right-start] max-sm:[--placement:bottom] rtl:[--placement:left-start]">
<a id="nested-dropdown-2" class="dropdown-toggle dropdown-item dropdown-open:bg-base-content/10 dropdown-open:text-base-content justify-between" href="javascript:void(0)" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Components
<span class="icon-[tabler--chevron-right] size-4 rtl:rotate-180"></span>
</a>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown-2">
<li><a class="dropdown-item" href="javascript:void(0)">Basic</a></li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
Advanced
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li class="dropdown relative [--auto-close:inside] [--offset:10] [--placement:right-start] max-sm:[--placement:bottom] rtl:[--placement:left-start]">
<a id="nested-dropdown-2" class="dropdown-toggle dropdown-item dropdown-open:bg-base-content/10 dropdown-open:text-base-content justify-between" href="javascript:void(0)" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Vendor
<span class="icon-[tabler--chevron-right] size-4 rtl:rotate-180"></span>
</a>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown-2">
<li>
<a class="dropdown-item" href="javascript:void(0)">
Data tables
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
Apex charts
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Clipboard</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Careers</a></li>
</ul>
</div>
<div class="navbar-end items-center gap-4">
<div class="dropdown relative inline-flex sm:hidden rtl:[--placement:bottom-end]">
<button id="dropdown-default" type="button" class="dropdown-toggle btn btn-text btn-secondary btn-square" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<span class="icon-[tabler--menu-2] dropdown-open:hidden size-5"></span>
<span class="icon-[tabler--x] dropdown-open:block hidden size-5"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-default">
<li class="dropdown relative [--auto-close:inside] [--offset:9] [--placement:bottom-end] max-sm:[--placement:bottom]">
<a id="dropdown-end-2" class="dropdown-toggle dropdown-item dropdown-open:bg-base-content/10 dropdown-open:text-base-content justify-between" href="javascript:void(0)" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Products
<span class="icon-[tabler--chevron-right] size-4 rtl:rotate-180"></span>
</a>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Templates</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">UI kits</a></li>
<li class="dropdown relative [--auto-close:inside] [--offset:10] [--placement:right-start] max-sm:[--placement:bottom] rtl:[--placement:left-start]">
<a id="nested-dropdown-2" class="dropdown-toggle dropdown-item dropdown-open:bg-base-content/10 dropdown-open:text-base-content justify-between" href="javascript:void(0)" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Components
<span class="icon-[tabler--chevron-right] size-4 rtl:rotate-180"></span>
</a>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown-2">
<li><a class="dropdown-item" href="javascript:void(0)">Basic</a></li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
Advanced
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li class="dropdown relative [--auto-close:inside] [--offset:10] [--placement:right-start] max-sm:[--placement:bottom] rtl:[--placement:left-start]">
<a id="nested-dropdown-2" class="dropdown-toggle dropdown-item dropdown-open:bg-base-content/10 dropdown-open:text-base-content justify-between" href="javascript:void(0)" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Vendor
<span class="icon-[tabler--chevron-right] size-4 rtl:rotate-180"></span>
</a>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden w-48" role="menu" aria-orientation="vertical" aria-labelledby="nested-dropdown-2">
<li>
<a class="dropdown-item" href="javascript:void(0)">
Data tables
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
Apex charts
<span class="badge badge-sm badge-soft badge-primary rounded-full">Pro</span>
</a>
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Clipboard</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="javascript:void(0)">About</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Careers</a></li>
</ul>
</div>
<a class="btn btn-primary" href="javascript:void(0)">Login</a>
</div>
</nav>
</div>The example below demonstrates a navbar with submenu.
<nav class="navbar rounded-t-box gap-4">
<div class="navbar-start items-center">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)">
FlyonUI
</a>
</div>
<div class="navbar-end flex items-center gap-4">
<button class="btn btn-sm btn-text btn-circle size-[2.125rem] sm:hidden">
<span class="icon-[tabler--search] size-[1.375rem]"></span>
</button>
<label class="input-group max-w-56 rounded-full max-sm:hidden">
<span class="input-group-text">
<span class="icon-[tabler--search] text-base-content/80 size-5"></span>
</span>
<input type="search" class="input grow rounded-e-full" placeholder="Search" />
</label>
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
<button id="dropdown-scrollable" type="button" class="dropdown-toggle flex items-center" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<div class="avatar">
<div class="size-9.5 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
</div>
</div>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-52" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-avatar">
<li class="dropdown-header gap-3 border-0 pt-3">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" href="javascript:void(0)" alt="avatar 1" />
</div>
</div>
<div>
<h6 class="text-base-content/90 text-base font-semibold">John Doe</h6>
<small class="text-base-content/50">Admin</small>
</div>
</li>
<li><hr class="border-base-content/25 -mx-2 mb-3" /></li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--user]"></span>
My Profile
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--settings]"></span>
Settings
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--receipt-rupee]"></span>
Billing
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)">
<span class="icon-[tabler--help-triangle]"></span>
FAQs
</a>
</li>
<li><hr class="border-base-content/25 -mx-2 my-3" /></li>
<li>
<a class="dropdown-item btn btn-text btn-error" href="javascript:void(0)">
<span class="icon-[tabler--logout]"></span>
Sign out
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="bg-base-100 flex w-full items-center">
<ul class="menu menu-horizontal gap-2 text-base">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
<li><a href="javascript:void(0)">Link 3</a></li>
</ul>
</div>Craft user-friendly Mega Menus with Tailwind CSS, incorporating multi-level dropdown navigation to streamline content access and enhance the browsing experience for website visitors.
The example below shows a navbar that features a mega menu activated by clicking.
<header class=" bg-base-100 flex w-full flex-wrap py-4 text-sm sm:flex-nowrap sm:justify-start sm:py-0">
<nav class="mx-auto w-full px-4" aria-label="Global">
<div class="relative sm:flex sm:items-center">
<div class="flex items-center justify-between">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)" >
FlyonUI
</a>
<div class="sm:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#navbar-mega-menu-click" aria-controls="navbar-mega-menu-click" aria-label="Toggle navigation" >
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
<div id="navbar-mega-menu-click" class="collapse hidden grow basis-full overflow-hidden rounded-lg transition-all duration-300 sm:block" >
<div class="flex flex-col rounded-lg max-sm:mt-3 max-sm:border max-sm:p-2 sm:flex-row sm:items-center sm:justify-end sm:ps-5 sm:pe-0.5 gap-2" >
<ul class="menu sm:menu-horizontal text-base px-0 max-sm:w-fit max-sm:py-0 gap-2">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
</ul>
<div class="dropdown [--adaptive:none] [--auto-close:inside] [--strategy:static] sm:[--strategy:absolute]">
<button type="button" class="dropdown-toggle btn btn-text text-base-content/80 dropdown-open:bg-base-content/10 dropdown-open:text-base-content/90 max-sm:px-3" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Mega menu
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 start-0 top-full hidden w-full min-w-60 rounded-lg py-2 opacity-0 transition-[opacity,margin] duration-[0.1ms] before:absolute max-sm:border max-sm:shadow-none" role="menu" aria-orientation="vertical">
<ul class="menu sm:menu-horizontal rounded-box w-full max-xl:gap-4 p-0">
<li>
<a class="menu-title">Services</a>
<ul class="menu">
<li><a href="javascript:void(0)">Design Solutions</a></li>
<li><a href="javascript:void(0)">Software Development</a></li>
<li><a href="javascript:void(0)">Web Hosting</a></li>
<li><a href="javascript:void(0)">Domain Registration</a></li>
</ul>
</li>
<li>
<a class="menu-title">Corporate Solutions</a>
<ul class="menu">
<li><a href="javascript:void(0)">CRM</a></li>
<li><a href="javascript:void(0)">Management Solutions</a></li>
<li><a href="javascript:void(0)">Security Services</a></li>
<li><a href="javascript:void(0)">Consulting Services</a></li>
</ul>
</li>
<li>
<a class="menu-title">Product Offerings</a>
<ul class="menu">
<li><a href="javascript:void(0)">UI Kits</a></li>
<li><a href="javascript:void(0)">Component Library</a></li>
<li><a href="javascript:void(0)">WordPress Plugins</a></li>
<li>
<a class="menu-title">Open Source Projects</a>
<ul class="menu">
<li><a href="javascript:void(0)">Authentication System</a></li>
<li><a href="javascript:void(0)">Flyon Theme</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>The example below shows a navbar that features a mega menu activated on hover.
<header class="bg-base-100 flex w-full flex-wrap py-2 text-sm sm:flex-nowrap sm:justify-start sm:py-0">
<nav class="mx-auto w-full px-4" aria-label="Global">
<div class="relative sm:flex sm:items-center">
<div class="flex items-center justify-between">
<a class="link text-base-content/90 link-neutral text-xl font-semibold no-underline" href="javascript:void(0)" >
FlyonUI
</a>
<div class="sm:hidden">
<button type="button" class="collapse-toggle btn btn-outline btn-secondary btn-sm btn-square" data-collapse="#navbar-mega-menu-hover" aria-controls="navbar-mega-menu-hover" aria-label="Toggle navigation" >
<span class="icon-[tabler--menu-2] collapse-open:hidden size-4"></span>
<span class="icon-[tabler--x] collapse-open:block hidden size-4"></span>
</button>
</div>
</div>
<div id="navbar-mega-menu-hover" class="collapse hidden grow basis-full overflow-hidden rounded-lg transition-all duration-300 sm:block" >
<div class="flex flex-col rounded-lg max-sm:mt-3 max-sm:border max-sm:p-2 sm:flex-row sm:items-center sm:justify-end gap-2 sm:ps-5 sm:pe-0.5 sm:py-0.5" >
<ul class="menu sm:menu-horizontal p-0 font-medium max-sm:w-fit gap-2">
<li><a href="javascript:void(0)">Link 1</a></li>
<li><a href="javascript:void(0)">Link 2</a></li>
</ul>
<div class="dropdown [--adaptive:none] [--auto-close:inside] [--strategy:static] [--trigger:hover] sm:[--strategy:absolute]" >
<button type="button" class="dropdown-toggle btn btn-text text-base-content/80 dropdown-open:bg-base-content/10 dropdown-open:text-base-content/90 max-sm:px-3" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Mega menu
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 start-0 top-full hidden w-full min-w-60 rounded-lg p-0 opacity-0 shadow-none transition-[opacity,margin] duration-[0.1ms] before:absolute" role="menu" aria-orientation="vertical">
<ul class="menu sm:menu-horizontal rounded-box w-full max-xl:gap-4 max-sm:border sm:shadow">
<li>
<a class="menu-title">Services</a>
<ul class="menu">
<li><a href="javascript:void(0)">Design Solutions</a></li>
<li><a href="javascript:void(0)">Software Development</a></li>
<li><a href="javascript:void(0)">Web Hosting</a></li>
<li><a href="javascript:void(0)">Domain Registration</a></li>
</ul>
</li>
<li>
<a class="menu-title">Corporate Solutions</a>
<ul class="menu">
<li><a href="javascript:void(0)">CRM</a></li>
<li><a href="javascript:void(0)">Management Solutions</a></li>
<li><a href="javascript:void(0)">Security Services</a></li>
<li><a href="javascript:void(0)">Consulting Services</a></li>
</ul>
</li>
<li>
<a class="menu-title">Product Offerings</a>
<ul class="menu">
<li><a href="javascript:void(0)">UI Kits</a></li>
<li><a href="javascript:void(0)">Component Library</a></li>
<li><a href="javascript:void(0)">WordPress Plugins</a></li>
<li>
<a class="menu-title">Open Source Projects</a>
<ul class="menu">
<li><a href="javascript:void(0)">Authentication System</a></li>
<li><a href="javascript:void(0)">Flyon Theme</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
