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-secondary" 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-md 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-md 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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-secondary" 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-secondary 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-secondary" href="javascript:void(0);">
<svg class="inline-block align-text-top" width="25" height="25" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9757 0.803847C16.1193 -0.267949 13.8322 -0.267949 11.9757 0.803847L3 5.986C1.14359 7.05779 0 9.03856 0 11.1822V21.5464C0 23.69 1.14359 25.6708 3 26.7426L11.9757 31.9247C13.8322 32.9965 16.1193 32.9965 17.9757 31.9247L26.9515 26.7426C28.8079 25.6708 29.9515 23.69 29.9515 21.5464V11.1821C29.9515 9.03855 28.8079 7.05779 26.9515 5.986L17.9757 0.803847ZM16.4757 6.08629C15.5475 5.5504 14.4039 5.5504 13.4757 6.0863L6.8247 9.92627C5.8965 10.4622 5.3247 11.4526 5.3247 12.5243V20.2043C5.3247 21.2761 5.8965 22.2665 6.82471 22.8024L13.4757 26.6423C14.4039 27.1782 15.5475 27.1782 16.4757 26.6423L23.1268 22.8024C24.055 22.2665 24.6268 21.2761 24.6268 20.2043V12.5243C24.6268 11.4525 24.055 10.4622 23.1268 9.92627L16.4757 6.08629Z" fill="#0D6EFD"></path>
</svg>
W3POS
</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-secondary" 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-md 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-secondary" 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-md 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-secondary" 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-md 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-md 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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-secondary">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-1.5 px-3 relative flex-auto w-[1%] h-10 rounded-md 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">
<button class="btn btn-success me-2" type="button">Main button</button>
<button class="btn btn-sm border border-secondary text-secondary hover:bg-secondaryhover hover:shadow-btnsecondary hover:text-white" 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-secondary">
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-secondary 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-md 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-secondary">
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-bs-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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-bs-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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-secondary">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-secondary" 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-secondary" 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-secondary" 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-secondary" 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-secondary" 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-secondary" 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-secondary" 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-md 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-secondary" 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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-secondary" 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-md 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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-md 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-secondary 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" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md text-2xs block duration-500 focus:border-primary me-2 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-md 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-secondary" href="javascript:void(0);">Offcanvas navbar</a>
<div x-data="{}">
<button class="py-1 px-3 text-lg leading-none text-secondary/50 border border-black/10 rounded-md 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-3.75">
<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-md 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 mt-3" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor rounded-md block duration-500 focus:border-primary bg-transparent me-2 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-secondary/50 border border-black/10 rounded-md 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-3.75">
<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-md 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 mt-3" role="search">
<input class="py-1.5 px-3 h-10 border border-bordercolor/60 rounded-md block me-2 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>