Navbar.
Make use of Tailwind's unique navbar styles to create a responsive and visually appealing navigation bar that enhances user interaction and utilize them to design an intuitive navigation system that integrates branding elements and enhances site navigation.
NavbarDeafult Navbar
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex1')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex1.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarSupportedContent" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item relative" x-data="{ open: false }">
<a class="lg:px-2 py-2 block dropdown-toggle" href="javascript:void(0);" role="button" @click="open = true">
Dropdown
</a>
<ul class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li><hr class="my-2! border-t border-bordercolor"></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
Navbar Text
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar (As a link)</a>
</div>
</nav>
<--! As a heading -->
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<span class="py-1.5 mr-4 text-lg text-heading h1">Navbar (As a heading)</span>
</div>
</nav>
Navbar With Image and text
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">
<svg class="inline-block align-text-top" fill="#00bcff" width="35" height="35" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.822 3.5-1.491.761.189 1.305.738 1.906 1.345C13.387 10.855 14.522 12 17 12c2.667 0 4.333-1.325 5-3.976-1 1.325-2.166 1.822-3.5 1.491-.761-.189-1.305-.738-1.907-1.345-.98-.99-2.114-2.134-4.593-2.134zM7 12c-2.667 0-4.333 1.325-5 3.976 1-1.326 2.167-1.822 3.5-1.491.761.189 1.305.738 1.907 1.345.98.989 2.115 2.134 4.594 2.134 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.822-3.5 1.491-.761-.189-1.305-.738-1.906-1.345C10.613 13.145 9.478 12 7 12z"/>
</g>
</svg>
Tailwind
</a>
</div>
</nav>
Nav with lists, links and dropdowns
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex2')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex2.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarNav" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Features</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Pricing</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex3')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex3.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarNavAltMarkup" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<div class="flex lg:flex-row flex-col">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Features</a>
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Pricing</a>
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex7')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex7.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarNavDropdown" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Features</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Pricing</a>
</li>
<li class="nav-item relative" x-data="{ open: false }">
<a class="lg:px-2 py-2 block dropdown-toggle" href="javascript:void(0);" role="button" @click="open = true">
Dropdown link
</a>
<ul class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Forms Navbar
Input groups in navbar forms
Various buttons are supported as part of these navbar forms
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primarylight" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="flex relative my-2 bg-light mb-4">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading">Navbar</a>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primarylight" type="submit">Search</button>
</form>
</div>
</nav>
<h6 class="mb-3 font-medium">Input groups in navbar forms</h6>
<nav class="flex relative my-2 bg-light mb-6">
<form class="p-2.5 flex flex-wrap items-center justify-between w-full">
<div class="relative flex flex-wrap items-stretch w-full">
<span class="input-group-text border border-bordercolor bg-light rounded-e-none! border-r-0" id="basic-addon1">@</span>
<input type="text" class="py-2.5 px-5 relative flex-auto w-[1%] h-10 rounded-xl duration-500 focus:border-primary border border-bordercolor rounded-s-none!" placeholder="Username">
</div>
</form>
</nav>
<h6 class="mb-3 font-medium">Various buttons are supported as part of these navbar forms</h6>
<nav class="flex relative my-2 bg-light">
<form class="p-2.5 justify-start flex flex-wrap gap-2">
<button class="btn btn-success-outline" type="button">Main button</button>
<button class="btn btn-sm btn-secondary-outline" type="button">Smaller button</button>
</form>
</nav>
Navbar With text
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<span class="navbar-text text-heading">
Navbar text with an inline element
</span>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading whitespace-nowrap" href="javascript:void(0);">Navbar w/ text</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex8')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex8.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarText"
:class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Features</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Pricing</a>
</li>
</ul>
<span class="navbar-text text-heading">
Navbar text with an inline element
</span>
</div>
</div>
</div>
</div>
</nav>
Color Schemes
<nav class="flex relative my-2 bg-dark border-bottom border-body" data-tw-theme="dark">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-white">Navbar</a>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="flex relative my-2 bg-primary" data-tw-theme="dark">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-white">Navbar</a>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar" style="background-color: #e3f2fd;">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading">Navbar</a>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</nav>
Navbar Container
Use any of the responsive containers to change how wide the content in your navbar is presented
<div class="container-fluid">
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
</div>
</nav>
</div>
<h6>Use any of the responsive containers to change how wide the content in your navbar is presented</h6>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
</div>
</nav>
Placement
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Default</a>
</div>
</nav>
<nav class="flex relative my-2 fixed-top bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Fixed top</a>
</div>
</nav>
<nav class="flex relative my-2 fixed-bottom bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Fixed bottom</a>
</div>
</nav>
<nav class="flex relative my-2 sticky-top bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Sticky top</a>
</div>
</nav>
<nav class="flex relative my-2 sticky-bottom bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Sticky bottom</a>
</div>
</nav>
Responsive Behaviour
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<div x-data="{}" class="max-lg:float-left">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex9')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex9.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarTogglerDemo01" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Hidden brand</a>
<ul class="flex lg:flex-row flex-col me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex10')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex10.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarTogglerDemo02" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-light">
<div class="p-2.5 lg:flex items-center w-full">
<div x-data="{}" class="max-lg:float-left">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-black/15 rounded-xl duration-150 lg:hidden" type="button" @click="$dispatch('offcanvas-ex11')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
<a class="py-1.5 mr-4 text-lg text-heading max-lg:float-right" href="javascript:void(0);">Navbar</a>
<div class="w-full" x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex11.window="offcanvas = !offcanvas">
<div class="lg:flex items-center grow duration-500 max-lg:h-0 max-lg:overflow-hidden" id="navbarTogglerDemo03" :class="{ ' max-lg:h-auto! max-lg:overflow-visible!': offcanvas }">
<ul class="flex lg:flex-row flex-col me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex flex-wrap gap-2" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl text-2xs block duration-500 focus:border-primary w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
External Content
Collapsed content
Toggleable via the navbar brand.
<div x-data="{ offcanvas: false }" id="navbarToggleExternalContent">
<div x-on:offcanvas-ex4.window="offcanvas = !offcanvas">
<div class="bg-dark p-0 h-0 opacity-0 duration-500" :class="{ ' h-auto! opacity-100 p-4! ': offcanvas }">
<h5 class="text-white! mb-2 h4">Collapsed content</h5>
<span class="text-gray-300">Toggleable via the navbar brand.</span>
</div>
</div>
</div>
<nav class="flex relative my-2 navbar-dark bg-dark" x-data="{}">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<button class="py-1 px-3 text-lg leading-none text-white/50 border border-white/10 rounded-xl duration-150" type="button" @click="$dispatch('offcanvas-ex4')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-menuicon"></span>
</button>
</div>
</nav>
Offcanvas
<nav class="flex relative my-2 bg-light">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-heading" href="javascript:void(0);">Offcanvas navbar</a>
<div x-data="{}">
<button class="py-1 px-3 text-lg leading-none text-heading/50 border border-black/10 rounded-xl duration-150" type="button" @click="$dispatch('offcanvas-ex5')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex5.window="offcanvas = !offcanvas">
<div class="fixed top-0 right-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 right-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper translate-x-full" :class="{ 'translate-x-0!': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<ul class="flex flex-col justify-end grow pe-3">
<li class="nav-item">
<a class="lg:px-2 py-2 block active" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item relative" x-data="{ open: false }">
<a class="lg:px-2 py-2 block dropdown-toggle" href="javascript:void(0);" role="button" @click="open = true">
Dropdown
</a>
<ul class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li>
<hr class="my-2! border-t border-bordercolor">
</li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
<form class="flex gap-2 mt-3" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor rounded-xl block duration-500 focus:border-primary bg-transparent w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
Offcanvas
<nav class="flex relative my-2 navbar-dark bg-dark">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-lg text-white" href="javascript:void(0);">Offcanvas navbar</a>
<div x-data="{}">
<button class="py-1 px-3 text-lg leading-none text-heading/50 border border-black/10 rounded-xl duration-150" type="button" @click="$dispatch('offcanvas-ex6')">
<span class="inline-block size-6 align-middle bg-no-repeat bg-center bg-full bg-dark-menuicon"></span>
</button>
</div>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex6.window="offcanvas = !offcanvas">
<div class="fixed top-0 right-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 right-0 flex flex-col sm:w-100 w-87.5 h-screen z-9999 bg-dark duration-500 ease-in-out offcanvas-wrapper translate-x-full" :class="{ 'translate-x-0!': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="text-white">Offcanvas</h5>
<button type="button" class="btn-close invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<ul class="flex flex-col justify-end grow pe-3">
<li class="nav-item">
<a class="lg:px-2 py-2 block text-white" aria-current="page" href="javascript:void(0);">Home</a>
</li>
<li class="nav-item">
<a class="lg:px-2 py-2 block" href="javascript:void(0);">Link</a>
</li>
<li class="nav-item relative" x-data="{ open: false }">
<a class="lg:px-2 py-2 block dropdown-toggle" href="javascript:void(0);" role="button" @click="open = true">
Dropdown
</a>
<ul class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li>
<hr class="my-2! border-t border-bordercolor">
</li>
<li><a class="py-2 px-5 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
<form class="flex gap-2 mt-3" role="search">
<input class="py-2.5 px-5 h-11 border border-bordercolor/60 rounded-xl block w-auto text-white" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>