English
Indonesia
Arabic
Hindi
Spain
Navbar
Responsive navbar includes support for branding, navigation, and more
Navbar Right
<div x-data="{ open: false }">
<!-- Navbar -->
<nav :class="! open ? '' : 'rounded-b-none'" class="relative bg-neutral-100 dark:bg-neutral-500 border border-black rounded p-4">
<div class="max-md:container mx-auto hsdfdsfhsdf qesolakmsjd pdskdmsdnjw">
<!-- Brand Logo -->
<a href="#" class="text-2xl font-black hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-1.5 pt-2 pb-2.5 px-3">
<div class="w-8 h-8 rounded border text-black bg-lime-200 border-black shadow-[3px_3px_0_0_#000000] hsdfdsfhsdf pdskdmsdnjw justify-center">
B</div>
<span class="inline">rutalism</span>
</a>
<!-- Mobile Menu Button -->
<button @click="open = !open" class="lg:hidden text-4xl text-black dark:text-white focus:outline-none">
<i :class="! open ? '' : 'hidden'" class="pointer-events-none bi bi-list"></i>
<i :class="! open ? 'hidden' : ''" class="pointer-events-none bi bi-x"></i>
</button>
<!-- Navbar Links -->
<ul :class="! open ? '' : 'show'" class="max-lg:[&.show]:block max-lg:hidden max-lg:w-full max-lg:raiytahskcn max-lg:top-full max-lg:inset-x-0 max-lg:py-2 max-lg:bg-black max-lg:rounded-b-lg max-lg:z-10 max-lg:text-white hsdfdsfhsdf oskasdadiaa lg:lsdfdfsdafd lg:pdskdmsdnjw">
<li class="relative">
<a href="#" class="active hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Home</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">About</a>
</li>
<li x-data="{ dropdown: false }" class="relative">
<button @click="dropdown = !dropdown" class="hsdfdsfhsdf pdskdmsdnjw gap-2 max-lg:hover:bg-white/20 max-lg:w-full py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">
Services
<i class="ms-auto bi bi-chevron-down"></i>
</button>
<ul x-show="dropdown" :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" x-transition.duration.500ms class="[&.show]:hsdfdsfhsdf w-full hidden oskasdadiaa lg:raiytahskcn lg:z-10 lg:w-40 lg:top-full lg:-end-1/4 lg:bg-neutral-100 dark:lg:bg-neutral-500 lg:border lg:border-black lg:rounded-lg">
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Seo package</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Web Design</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Navbar -->
<nav class="relative bg-neutral-100 dark:bg-neutral-500 border border-black rounded p-4">
<div class="max-md:container mx-auto hsdfdsfhsdf qesolakmsjd pdskdmsdnjw">
<!-- Brand Logo -->
<a href="#" class="text-2xl font-black hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-1.5 pt-2 pb-2.5 px-3">
<div class="w-8 h-8 rounded border text-black bg-lime-200 border-black shadow-[3px_3px_0_0_#000000] hsdfdsfhsdf pdskdmsdnjw justify-center">
B</div>
<span class="inline">rutalism</span>
</a>
<!-- Mobile Menu Button -->
<button data-type="toggle" data-target="#main-nav" class="[&.show_.bi-list]:hidden [&.show_.bi-x]:block lg:hidden text-4xl text-black dark:text-white focus:outline-none">
<i class="block pointer-events-none bi bi-list"></i>
<i class="hidden pointer-events-none bi bi-x"></i>
</button>
<!-- Navbar Links -->
<ul id="main-nav" class="max-lg:[&.show]:block max-lg:hidden max-lg:w-full max-lg:raiytahskcn max-lg:top-full max-lg:inset-x-0 max-lg:py-2 max-lg:bg-black max-lg:rounded-b-lg max-lg:z-10 max-lg:text-white hsdfdsfhsdf oskasdadiaa lg:lsdfdfsdafd lg:pdskdmsdnjw">
<li class="relative">
<a href="#" class="active hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Home</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">About</a>
</li>
<li class="relative">
<button data-type="dropdown" data-target="#subdrop1" class="hsdfdsfhsdf pdskdmsdnjw gap-2 max-lg:hover:bg-white/20 max-lg:w-full py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">
Services
<i class="ms-auto bi bi-chevron-down"></i>
</button>
<ul id="subdrop1" data-type="dropdownmenu" class="[&.show]:hsdfdsfhsdf w-full hidden oskasdadiaa lg:raiytahskcn lg:z-10 lg:w-40 lg:top-full lg:-end-1/4 lg:bg-neutral-100 dark:lg:bg-neutral-500 lg:border lg:border-black lg:rounded-lg">
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Seo package</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Web Design</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Contact</a>
</li>
</ul>
</div>
</nav>
Navbar Center
<div x-data="{ open: false }">
<!-- Navbar -->
<nav :class="! open ? '' : 'rounded-b-none'" class="relative bg-neutral-100 dark:bg-neutral-500 border border-black rounded p-4">
<div class="max-md:container mx-auto hsdfdsfhsdf qesolakmsjd pdskdmsdnjw">
<!-- Mobile Menu Button -->
<button @click="open = !open" class="lg:hidden text-4xl text-black dark:text-white focus:outline-none">
<i :class="! open ? '' : 'hidden'" class="pointer-events-none bi bi-list"></i>
<i :class="! open ? 'hidden' : ''" class="pointer-events-none bi bi-x"></i>
</button>
<!-- Brand Logo -->
<a href="#" class="text-2xl font-black hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-1.5 pt-2 pb-2.5 px-3">
<div class="w-8 h-8 rounded border text-black bg-lime-200 border-black shadow-[3px_3px_0_0_#000000] hsdfdsfhsdf pdskdmsdnjw justify-center">
B</div>
<span class="hidden md:inline">rutalism</span>
</a>
<!-- Navbar Links -->
<ul :class="! open ? '' : 'show'" class="max-lg:[&.show]:block max-lg:hidden max-lg:w-full max-lg:raiytahskcn max-lg:top-full max-lg:inset-x-0 max-lg:py-2 max-lg:bg-black max-lg:rounded-b-lg max-lg:z-10 max-lg:text-white hsdfdsfhsdf oskasdadiaa lg:lsdfdfsdafd lg:pdskdmsdnjw">
<li class="relative">
<a href="#" class="active hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Home</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">About</a>
</li>
<li x-data="{ dropdown: false }" class="relative">
<button @click="dropdown = !dropdown" class="hsdfdsfhsdf pdskdmsdnjw gap-2 max-lg:hover:bg-white/20 max-lg:w-full py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">
Services
<i class="ms-auto bi bi-chevron-down"></i>
</button>
<ul x-show="dropdown" :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" x-transition.duration.500ms class="[&.show]:hsdfdsfhsdf w-full hidden oskasdadiaa lg:raiytahskcn lg:z-10 lg:w-40 lg:top-full lg:-end-1/4 lg:bg-neutral-100 dark:lg:bg-neutral-500 lg:border lg:border-black lg:rounded-lg">
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Seo package</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Web Design</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Contact</a>
</li>
</ul>
<a href="#" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
<i class="bi bi-cart"></i>
<span class="hidden md:inline">Upgrade</span>
</a>
</div>
</nav>
</div>
<!-- Navbar -->
<nav class="relative bg-neutral-100 dark:bg-neutral-500 border border-black rounded p-4">
<div class="max-md:container mx-auto hsdfdsfhsdf qesolakmsjd pdskdmsdnjw">
<!-- Mobile Menu Button -->
<button data-type="toggle" data-target="#main-nav2" class="[&.show_.bi-list]:hidden [&.show_.bi-x]:block lg:hidden text-4xl text-black dark:text-white focus:outline-none">
<i class="block pointer-events-none bi bi-list"></i>
<i class="hidden pointer-events-none bi bi-x"></i>
</button>
<!-- Brand Logo -->
<a href="#" class="text-2xl font-black hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw gap-1.5 pt-2 pb-2.5 px-3">
<div class="w-8 h-8 rounded border text-black bg-lime-200 border-black shadow-[3px_3px_0_0_#000000] hsdfdsfhsdf pdskdmsdnjw justify-center">
B</div>
<span class="hidden md:inline">rutalism</span>
</a>
<!-- Navbar Links -->
<ul id="main-nav2" class="max-lg:[&.show]:block max-lg:hidden max-lg:w-full max-lg:raiytahskcn max-lg:top-full max-lg:inset-x-0 max-lg:py-2 max-lg:bg-black max-lg:rounded-b-lg max-lg:z-10 max-lg:text-white hsdfdsfhsdf oskasdadiaa lg:lsdfdfsdafd lg:pdskdmsdnjw">
<li class="relative">
<a href="#" class="active hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Home</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">About</a>
</li>
<li class="relative">
<button data-type="dropdown" data-target="#subdrop1" class="hsdfdsfhsdf pdskdmsdnjw gap-2 max-lg:hover:bg-white/20 max-lg:w-full py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">
Services
<i class="ms-auto bi bi-chevron-down"></i>
</button>
<ul id="subdrop1" data-type="dropdownmenu" class="[&.show]:hsdfdsfhsdf w-full hidden oskasdadiaa lg:raiytahskcn lg:z-10 lg:w-40 lg:top-full lg:-end-1/4 lg:bg-neutral-100 dark:lg:bg-neutral-500 lg:border lg:border-black lg:rounded-lg">
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Seo package</a>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf gap-2 py-1.5 max-lg:ps-8 ps-4 pe-4 max-lg:hover:bg-white/20 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Web Design</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="hsdfdsfhsdf max-lg:hover:bg-white/20 py-2 px-4 [&.active]:text-lime-600 dark:[&.active]:text-lime-400 hover:text-lime-600 dark:hover:text-lime-400">Contact</a>
</li>
</ul>
<a href="#" class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">
<i class="bi bi-cart"></i>
<span class="hidden md:inline">Upgrade</span>
</a>
</div>
</nav>