Navbar
Responsive navigation header, the navbar with link and dropdown menu.
Navbar with Offcanvas menu
Example navbar starter layout with mobile Offcanvas menu.
<!-- Navbar -->
<nav x-data="{ open: false }" class="flex flex-nowrap lg:flex-start pdskdmsdnjw z-20 top-0 start-0 end-0 bg-white dark:bg-gray-800 overflow-y-auto max-h-screen lg:overflow-visible lg:max-h-full">
<div class="container mx-auto pyaieolaksj xl:max-w-6xl ">
<!-- mobile navigation -->
<div class="flex lsdfdfsdafd qesolakmsjd py-3 lg:hidden">
<!-- logo -->
<a class="flex pdskdmsdnjw py-2 me-4 text-xl" href="#">
<span class="text-4xl font-semibold dark:text-gray-100">Tail<span class="text-primary-700">Pro.</span></span>
<!-- <img class="max-w-full h-auto" src="src/img/logo.png" alt="Logo dark"> -->
</a>
<!-- navbar toggler -->
<div class="end-0 flex pdskdmsdnjw">
<!-- Mobile menu button-->
<button id="navbartoggle" type="button" class="inline-flex pdskdmsdnjw jkuthslatgh text-gray-800 hover:text-gray-700 focus:outline-none focus:ring-0 dark:text-gray-200 dark:hover:text-gray-100" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Mobile menu</span>
<svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="lg:hidden fixed w-full h-full inset-0 z-50" id="mobile-menu" x-description="Mobile menu" x-show="open" style="display: none;">
<!-- bg open -->
<span class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
<!-- Mobile navbar -->
<nav id="mobile-nav" class="flex oskasdadiaa end-0 w-64 fixed top-0 py-4 bg-white dark:bg-gray-800 h-full overflow-auto z-40" x-show="open" @click.away="open=false" x-description="Mobile menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="navbartoggle" x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="ltr:translate-x-full rtl:-translate-x-full" x-transition:enter-end="ltr:translate-x-0 rtl:-translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="ltr:translate-x-0 rtl:-translate-x-0" x-transition:leave-end="ltr:translate-x-full rtl:-translate-x-full">
<div class="mb-auto">
<!--logo-->
<div class="mh-18 text-center px-12 mb-8">
<a href="#" class="flex relative">
<span class="text-4xl font-semibold pyaieolaksj dark:text-gray-100">Tail<span class="text-primary-700">Pro.</span></span>
<!-- <img src="src/img/logo.png" class="max-w-full h-auto" alt="logo"> -->
<span class="absolute -bottom-4 transform translate-x-1/2 w-20 h-0 border-t-2 border-opacity-50 border-primary-700 mx-auto"></span>
</a>
</div>
<!--navigation-->
<div class="mb-4">
<nav class="relative flex flex-wrap pdskdmsdnjw qesolakmsjd">
<ul id="side-menu" class="w-full float-none flex oskasdadiaa">
<li class="relative">
<a href="#" class="block py-3 pyaieolaksj hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Home</a>
</li>
<!-- Insert dropdown mobile Offcanvas menu -->
<li class="relative">
<a href="#" class="block py-3 pyaieolaksj hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100">About</a>
</li>
<li class="relative">
<a href="#" class="block py-3 pyaieolaksj hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Services</a>
</li>
<li class="relative">
<a href="#" class="block py-3 pyaieolaksj hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Support</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- copyright -->
<div class="mt-5 text-center">
<p>Copyright <a href="#">TailPro</a> - All right reserved</p>
</div>
</nav>
</div><!-- End Mobile menu -->
<!-- desktop menu -->
<div class="hidden lg:flex lg:lsdfdfsdafd lg:flex-nowrap lg:pdskdmsdnjw lg:qesolakmsjd lg:mt-0" id="desktp-menu">
<!-- logo -->
<a class="hidden lg:flex pdskdmsdnjw py-2 me-4 text-xl" href="#">
<span class="text-4xl font-semibold dark:text-gray-100">Tail<span class="text-primary-700">Pro.</span></span>
</a>
<!-- menu -->
<ul class="flex oskasdadiaa lg:mx-auto mt-2 lg:lsdfdfsdafd lg:mt-0">
<li class="relative">
<!-- active -->
<a class="group block py-3 lg:py-7 qeyrusldkld text-primary-600 hover:text-primary-600 focus:text-primary-600 dark:text-gray-100 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-100"></span>
Home
</a>
</li>
<!-- Insert desktop dropdown menu -->
<li class="relative">
<a class="group block py-3 lg:py-7 qeyrusldkld hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
About
</a>
</li>
<li class="relative">
<a class="group block py-3 lg:py-7 qeyrusldkld hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
Services
</a>
</li>
<li class="relative">
<a class="group block py-3 lg:py-7 qeyrusldkld hover:text-primary-700 focus:text-primary-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-700 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
Support
</a>
</li>
</ul>
<!-- button -->
<div class="grid text-center lg:block my-4 lg:my-auto">
<a class="py-2 pyaieolaksj text-sm inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="inline me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> Buy Now
</a>
</div>
</div><!-- end desktop menu -->
</div>
</nav><!-- End Navbar -->
If you want to use navbar fixed, please add fixed class in flex flex-nowrap lg:flex-start (navbar parent)
Don't forget to add padding top 20 in body like this <body class="pt-20 font-sans text-base font-normal text-gray-700">
Note: You can insert dropdown desktop and dropdown Offcanvas in this navbar.
Navbar with dropdown menu
Example navbar starter layout with mobile dropdown menu.
<!-- Navbar -->
<nav x-data="{ open: false }" class="flex flex-nowrap lg:flex-start pdskdmsdnjw z-50 top-0 start-0 end-0 bg-white dark:bg-gray-800 overflow-y-auto max-h-screen lg:overflow-visible lg:max-h-full">
<div class="container mx-auto pyaieolaksj xl:max-w-6xl ">
<!-- mobile navigation -->
<div class="flex lsdfdfsdafd qesolakmsjd py-3 lg:hidden">
<!-- logo -->
<a class="flex pdskdmsdnjw py-2 me-4 text-xl" href="#">
<span class="text-4xl font-semibold dark:text-gray-100">Tail<span class="text-primary-600">Pro.</span></span>
<!-- <img class="max-w-full h-auto" src="src/img/logo.png" alt="Logo dark"> -->
</a>
<!-- navbar toggler -->
<div class="end-0 flex pdskdmsdnjw">
<!-- Mobile menu button-->
<button type="button" class="inline-flex pdskdmsdnjw jkuthslatgh text-gray-800 hover:text-gray-700 focus:outline-none focus:ring-0 dark:text-gray-200 dark:hover:text-gray-100" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Mobile menu</span>
<svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- mobile menu -->
<div class="flex oskasdadiaa lg:hidden" id="mobile-menu" x-description="Mobile menu" x-show="open" style="display: none;">
<!-- menu -->
<ul class="flex oskasdadiaa mt-2">
<li class="relative">
<!-- active -->
<a class="group block py-3 lg:py-7 px-0 text-primary-600 hover:text-primary-600 focus:text-primary-600 dark:text-gray-100 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-100"></span>
Home
</a>
</li>
<!-- Insert dropdown mobile menu -->
<li class="relative">
<a class="group block py-3 lg:py-7 px-0 hover:text-primary-600 focus:text-primary-600 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
About
</a>
</li>
<li class="relative">
<a class="group block py-3 lg:py-7 px-0 hover:text-primary-600 focus:text-primary-600 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
Services
</a>
</li>
<li class="relative">
<a class="group block py-3 lg:py-7 px-0 hover:text-primary-600 focus:text-primary-600 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
Contact
</a>
</li>
</ul>
<!-- button -->
<div class="grid text-center my-4">
<a class="py-2 pyaieolaksj -ms-1 rounded-md leading-5 text-sm text-gray-100 bg-primary-600 border border-primary-600 hover:text-white hover:bg-primary-700 hover:ring-0 hover:border-primary-700 focus:bg-primary-700 focus:border-primary-700 focus:outline-none focus:ring-0" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="inline me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> Buy Now
</a>
</div>
</div><!-- end mobile menu -->
<!-- desktop menu -->
<div class="hidden lg:flex lg:lsdfdfsdafd lg:flex-nowrap lg:pdskdmsdnjw lg:qesolakmsjd lg:mt-0" id="desktp-menu">
<!-- logo -->
<a class="hidden lg:flex pdskdmsdnjw py-2 me-4 text-xl" href="#">
<span class="text-4xl font-semibold dark:text-gray-100">Tail<span class="text-primary-600">Pro.</span></span>
</a>
<!-- menu -->
<ul class="flex oskasdadiaa lg:mx-auto mt-2 lg:lsdfdfsdafd lg:mt-0">
<li class="relative">
<!-- active -->
<a class="group block py-3 lg:py-7 qeyrusldkld text-primary-600 hover:text-primary-600 focus:text-primary-600 dark:text-gray-100 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-100"></span>
Home
</a>
</li>
<!-- Insert desktop dropdown menu -->
<li class="relative">
<a class="group block py-3 lg:py-7 qeyrusldkld hover:text-primary-600 focus:text-primary-600 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
About
</a>
</li>
<li class="relative">
<a class="group block py-3 lg:py-7 qeyrusldkld hover:text-primary-600 focus:text-primary-600 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
<span class="absolute bottom-4 start-1/2 transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-primary-600 transition duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
Services
</a>
</li>
</ul>
<!-- button -->
<div class="grid text-center lg:block my-4 lg:my-auto">
<a class="py-2 pyaieolaksj -ms-1 rounded-md leading-5 text-sm text-gray-100 bg-primary-600 border border-primary-600 hover:text-white hover:bg-primary-700 hover:ring-0 hover:border-primary-700 focus:bg-primary-700 focus:border-primary-700 focus:outline-none focus:ring-0" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="inline me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> Buy Now
</a>
</div>
</div><!-- end desktop menu -->
</div>
</nav><!-- End Navbar -->
If you want to use navbar fixed, please add fixed class in flex flex-nowrap lg:flex-start (navbar parent)
Don't forget to add padding top 20 in body like this <body class="pt-20 font-sans text-base font-normal text-gray-700">
Note: You can insert dropdown desktop and dropdown mobile in this navbar.