Tailwind CSS Navbar - Nuanxa
Komponen navbar default adalah navigation bar responsif yang dapat digunakan dalam berbagai tata letak. Komponen ini mencakup logo, tautan navigasi, dan tombol call-to-action.
Default navbar
Navbar default dengan logo dan tautan navigasi.
<nav
class="bg-white dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-sm shadow-gray-300 dark:shadow-gray-700"
>
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
</a>
<div class="flex items-center gap-3 md:gap-6">
<button
id="mobile-menu-button"
type="button"
class="order-2 md:hidden focus:outline-none mobile-toggle"
data-target="menu-navbar-default"
>
<i class="fas fa-bars text-gray-800 dark:text-gray-100 text-xl"></i>
</button>
<div
id="menu-navbar-default"
class="order-3 md:order-1 absolute top-16 right-0 h-[calc(100vh-64px)] w-full bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-40 md:static md:translate-x-0 md:h-auto md:w-auto md:shadow-none md:border-none md:flex"
>
<ul
class="flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 p-6 md:p-0"
>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Home</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Services</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Sticky navbar
Navbar sticky yang tetap terlihat di bagian atas halaman saat menggulir.
<nav
class="bg-white dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-sm shadow-gray-300 dark:shadow-gray-700 sticky z-50"
>
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
</a>
<div class="flex items-center gap-3 md:gap-6">
<button
id="mobile-menu-button"
type="button"
class="order-2 md:hidden focus:outline-none mobile-toggle"
data-target="menu-navbar-default"
>
<i class="fas fa-bars text-gray-800 dark:text-gray-100 text-xl"></i>
</button>
<div
id="menu-navbar-default"
class="order-3 md:order-1 absolute top-16 right-0 h-[calc(100vh-64px)] w-full bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-40 md:static md:translate-x-0 md:h-auto md:w-auto md:shadow-none md:border-none md:flex"
>
<ul
class="flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 p-6 md:p-0"
>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Home</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Services</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Navbar with dropdown
Navbar dengan menu dropdown.
<nav
class="bg-white dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-sm shadow-gray-300 dark:shadow-gray-700 sticky z-50"
>
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
</a>
<div class="flex items-center gap-3 md:gap-6">
<button
id="mobile-menu-button"
type="button"
class="order-2 md:hidden focus:outline-none mobile-toggle"
data-target="menu-navbar-default"
>
<i class="fas fa-bars text-gray-800 dark:text-gray-100 text-xl"></i>
</button>
<div
id="menu-navbar-default"
class="order-3 md:order-1 absolute top-16 right-0 h-[calc(100vh-64px)] w-full bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-40 md:static md:translate-x-0 md:h-auto md:w-auto md:shadow-none md:border-none md:flex"
>
<ul
class="flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 p-6 md:p-0"
>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Home</a
>
</li>
<!-- Dropdown -->
<li class="relative">
<button
type="button"
data-dropdown-toggle="dropdown-default"
class="flex items-center gap-2 text-gray-800 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>
Dropdown
<i class="fas fa-chevron-down text-xs"></i>
</button>
<ul
id="dropdown-default"
class="hidden dropdown-menu absolute right-auto mt-2 w-44 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
>
<li>
<a
href="#"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Menu 1
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Menu 2
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Menu 3
</a>
</li>
</ul>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Services</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Navbar with search
Navbar dengan form pencarian.
<nav
class="bg-white dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-sm shadow-gray-300 dark:shadow-gray-700 sticky z-40"
>
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
</a>
<div class="flex items-center gap-3 md:gap-6">
<div class="flex items-center order-1 md:order-3 gap-3 md:gap-6">
<div class="relative">
<!-- Search -->
<button
type="button"
data-dropdown-toggle="dropdown-search"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>
<i class="fas fa-search"></i>
</button>
<ul
id="dropdown-search"
class="hidden dropdown-menu absolute right-9 top-12 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
>
<li class="relative autofill-light dark:autofill-dark">
<div class="flex">
<input
type="search"
id="search"
placeholder="Search..."
class="min-w-full h-10 px-3 text-sm leading-none rounded-l-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<button
class="h-10 px-4 text-sm leading-none rounded-r-lg bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-400 transition flex items-center justify-center"
>
<span class="fas fa-search"></span>
</button>
</div>
</li>
</ul>
</div>
</div>
<button
id="mobile-menu-button"
type="button"
class="order-2 md:hidden focus:outline-none mobile-toggle"
data-target="menu-navbar-default"
>
<i class="fas fa-bars text-gray-800 dark:text-gray-100 text-xl"></i>
</button>
<div
id="menu-navbar-default"
class="order-3 md:order-1 absolute top-16 right-0 h-[calc(100vh-64px)] w-full bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-40 md:static md:translate-x-0 md:h-auto md:w-auto md:shadow-none md:border-none md:flex"
>
<ul
class="flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 p-6 md:p-0"
>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Home</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Services</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Navbar with submenu
Navbar dengan submenu.
<nav
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-sm shadow-gray-300 dark:shadow-gray-700 relative"
>
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<a href="#home" class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
</a>
<div class="flex items-center gap-3">
<a href="https://github.com/nuanxa-ui" target="_blank">
<img
src="/assets/img/logo/github-dark.png"
alt="Github"
class="w-6 h-6 object-contain dark:hidden block shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-full"
/>
<img
src="/assets/img/logo/github-light.png"
alt="Github"
class="w-6 h-6 object-contain hidden dark:block shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-full"
/></a
>
<a href="https://instagram.com/nuanxa_ui" target="_blank">
<img
src="/assets/img/logo/instagram.png"
alt="instagram"
class="w-6 h-6 object-contain shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-full"
/></a
>
<a href="https://facebook.com/nuanxaui" target="_blank">
<img
src="/assets/img/logo/facebook-icon.png"
alt="facebook"
class="w-6 h-6 object-contain shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-full"
/></a
>
</div>
</div>
</div>
<div
class="bg-gray-50 dark:bg-gray-700 border-y border-gray-300 dark:border-gray-700 shadow-sm shadow-blue-200 dark:shadow-gray-700"
>
<div class="max-w-7xl mx-auto px-6 py-2">
<ul class="flex space-x-8 text-md overflow-x-auto no-scrollbar">
<li>
<a
href="#overview"
class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition whitespace-nowrap"
>Overview</a
>
</li>
<li>
<a
href="#settings"
class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition whitespace-nowrap"
>Settings</a
>
</li>
<li>
<a
href="#security"
class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition whitespace-nowrap"
>Security</a
>
</li>
<li>
<a
href="#"
class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition whitespace-nowrap"
>Billing</a
>
</li>
</ul>
</div>
</div>
</nav>