Navbar
Navigation components using Tailwind CSS.
Example
The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
<nav class="bg-white navbar-expand">
<div class="flex flex-wrap items-center
justify-between p-4">
<a href="https://loudsight.com/" class="flex items-center space-x-3">
<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Loudsight Logo" />
</a>
<button
data-bs-toggle="collapse"
type="button"
class="navbar-toggler inline-flex items-center
p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden
hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div class="w-full lg:block lg:w-auto collapse
navbar-collapse" id="navbarSupportedContent">
<ul class="ml-auto font-medium flex flex-col p-4
lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row
lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-indigo-700
rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">About</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Alignment
Left aligned navbar.
<nav class="bg-white navbar-expand">
<div class="flex flex-wrap items-center
justify-between p-4">
<a href="https://loudsight.com/" class="flex items-center space-x-3">
<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Loudsight Logo" />
</a>
<button
data-bs-toggle="collapse"
type="button"
class="navbar-toggler inline-flex items-center
p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden
hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
data-bs-target="#navbarSupportedContentLeft"
aria-controls="navbarSupportedContentLeft"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div class="w-full lg:block lg:w-auto collapse
navbar-collapse" id="navbarSupportedContentLeft">
<ul class="lg:ml-10 font-medium flex flex-col p-4
lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row
lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-indigo-700
rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">About</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Center aligned navbar.
<nav class="bg-white navbar-expand">
<div class="flex flex-wrap items-center
justify-between p-4">
<a href="https://loudsight.com/" class="flex items-center space-x-3">
<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Loudsight Logo" />
</a>
<div class="flex md:order-2 space-x-3
md:space-x-0">
<button
type="button"
class="btn gap-x-2 bg-indigo-600 text-white
border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
active:border-indigo-800 focus:outline-none focus:ring-4
focus:ring-indigo-300"
>
Button
</button>
<button
data-bs-toggle="collapse"
type="button"
class="navbar-toggler inline-flex items-center
p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden
hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
data-bs-target="#navbarSupportedContentCenter"
aria-controls="navbarSupportedContentCenter"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
</div>
<div class="w-full lg:block lg:w-auto collapse
navbar-collapse" id="navbarSupportedContentCenter">
<ul class="mx-auto font-medium flex flex-col p-4
lg:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 lg:flex-row
lg:space-x-8 lg:mt-0 lg:border-0 lg:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-indigo-700
rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">About</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-800 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Color Varients
Theming the navbar with utility classes.
<header class="bg-gray-900 navbar-expand">
<nav class="flex flex-wrap items-center
justify-between p-4">
<a href="https://loudsight.com/" class="flex items-center space-x-3">
<img src="../assets/images/brand/logo/logo-primary.svg" class="" alt="Loudsight Logo" />
</a>
<button
data-bs-toggle="collapse"
type="button"
class="navbar-toggler inline-flex items-center
p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden
hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
data-bs-target="#navbarSupportedContentColorVarient"
aria-controls="navbarSupportedContentColorVarient"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div class="w-full lg:block lg:w-auto collapse
navbar-collapse" id="navbarSupportedContentColorVarient">
<ul
class="lg:ml-auto font-medium flex flex-col p-4
lg:p-0 mt-4 border border-gray-800 rounded-lg bg-gray-800 lg:bg-transparent
lg:flex-row lg:space-x-8 lg:mt-0 lg:border-0"
>
<li>
<a href="#" class="block py-2 px-3 text-white bg-indigo-700
rounded lg:bg-transparent lg:text-indigo-700 lg:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-500 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">About</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-500 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-500 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-500 rounded
hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-700
lg:p-0">Contact</a>
</li>
</ul>
</div>
</nav>
</header>