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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-[17.5px] 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-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
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-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li><hr class="my-2 border-t border-border"></li>
<li><a class="py-2 px-5 block hover:bg-primarylight 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-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
Navbar Text
<nav class="flex relative my-2 bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar (As a link)</a>
</div>
</nav>
<!-- As a heading -->
<nav class="flex relative my-2 bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<span class="py-1.5 mr-4 !text-[17.5px] text-secondary h1">Navbar (As a heading)</span>
</div>
</nav>
Navbar With Image and text
<nav class="flex relative my-2 bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] 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>
NexaDash
</a>
</div>
</nav>
Nav with lists, links and dropdowns
<nav class="flex relative my-2 navbar-expand-lg bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-[17.5px] 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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-[17.5px] 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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-[17.5px] 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-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
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-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li><a class="py-2 px-5 block hover:bg-primarylight 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-zinc-100 dark:bg-d-bg">
<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-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-primary text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="flex relative my-2 bg-zinc-100 dark:bg-d-bg mb-4">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-primary text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white" 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-zinc-100 dark:bg-d-bg 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-border bg-[#f8f9fa] dark:bg-d-bg !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-11 rounded-lg duration-500 focus:border-primary bg-d-bg border border-border !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-zinc-100 dark:bg-d-bg">
<form class="p-2.5 justify-start">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white 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-zinc-100 dark:bg-d-bg">
<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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] 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-[17.5px] 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-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-[17.5px] text-white">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn bg-light text-dark" 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-[17.5px] text-white">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn bg-light text-dark" 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-[17.5px] text-secondary">Navbar</a>
<form class="flex" role="search">
<input class="py-1.5 px-3 h-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn bg-light text-dark" 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">
<nav class="flex relative my-2 navbar-expand-lg bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] 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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
</div>
</nav>
Placement
<nav class="flex relative my-2 bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Default</a>
</div>
</nav>
<nav class="flex relative my-2 fixed-top bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Fixed top</a>
</div>
</nav>
<nav class="flex relative my-2 fixed-bottom bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Fixed bottom</a>
</div>
</nav>
<nav class="flex relative my-2 sticky-top bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Sticky top</a>
</div>
</nav>
<nav class="flex relative my-2 sticky-bottom bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Sticky bottom</a>
</div>
</nav>
Responsive Behaviour
<nav class="flex relative my-2 navbar-expand-lg bg-zinc-100 dark:bg-d-bg">
<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-[17.5px] 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-[17.5px] 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-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-zinc-100 dark:bg-d-bg">
<div class="p-2.5 lg:flex items-center w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Navbar</a>
<div x-data="{}" class="max-lg:float-right">
<button class="py-1 px-3 text-[17.5px] 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" role="search">
<input class="py-1.5 px-3 h-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>
<nav class="flex relative my-2 navbar-expand-lg bg-zinc-100 dark:bg-d-bg">
<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-[17.5px] 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-[17.5px] 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-11 border border-border rounded-lg text-2xs block duration-500 focus:border-primary me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white" 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-[17.5px] 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-zinc-100 dark:bg-d-bg">
<div class="p-2.5 flex flex-wrap items-center justify-between w-full">
<a class="py-1.5 mr-4 text-[17.5px] text-secondary" href="javascript:void(0);">Offcanvas navbar</a>
<div x-data="{}">
<button class="py-1 px-3 text-[17.5px] leading-none text-secondary/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-[400px] w-[350px] 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 flex-grow-1 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-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
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-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li>
<hr class="my-2 border-t border-border">
</li>
<li><a class="py-2 px-5 block hover:bg-primarylight 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-11 border border-border rounded-lg block duration-500 focus:border-primary bg-transparent me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn border border-success text-success hover:bg-successhover hover:shadow-btnsuccess hover:text-white" 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-[17.5px] text-white" href="javascript:void(0);">Offcanvas navbar</a>
<div x-data="{}">
<button class="py-1 px-3 text-[17.5px] leading-none text-secondary/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-[400px] w-[350px] 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 flex-grow-1 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-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
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-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Action</a></li>
<li><a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a></li>
<li>
<hr class="my-2 border-t border-border">
</li>
<li><a class="py-2 px-5 block hover:bg-primarylight 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-11 border border-border rounded-lg block bg-d-bg me-2 w-auto" type="search" placeholder="Search" aria-label="Search">
<button class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white" type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</nav>