Navbar

Tailwind CSS and Alpine JS Navbar

Navbars are a great way to display links to different pages of your website. They can be used to indicate the current page, the parent page, and more.

Requires Alpine JS

This component requires Alpine JS v3 to function properly. Some advanced features may require additional Alpine plugins (such as focus).

Tell Me More

Default navbar

A simple navbar with some links. On smaller screens, the navbar will be collapsed into a hamburger menu.

Background Color

HTML

<nav class="" aria-label="penguin ui menu">
	<!-- Brand Logo -->
	<a href="#" class="">
		<span>Peng<span class="">ui</span>n</span>
		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
	</a>
	<!-- Desktop Menu -->
	<ul class="">
		<li><a href="#" class="" aria-current="page">Products</a></li>
		<li><a href="#" class="">Pricing</a></li>
		<li><a href="#" class="">Blog</a></li>
		<li><a href="#" class="">Login</a></li>
	</ul>
	<!-- Mobile Menu Button -->
	<button type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
		</svg>
	</button>
	<!-- Mobile Menu -->
	<ul id="mobileMenu" class="">
		<li class=""><a href="#" class="" aria-current="page">Products</a></li>
		<li class=""><a href="#" class="">Pricing</a></li>
		<li class=""><a href="#" class="">Blog</a></li>
		<li class=""><a href="#" class="">Login</a></li>
	</ul>
</nav>

With a call to action

A navbar with a call-to-action button.

Background Color

HTML

<nav class="" aria-label="penguin ui menu">
	<!-- Brand Logo -->
	<a href="#" class="">
		<span>Peng<span class="">ui</span>n</span>
		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
	</a>
	<!-- Desktop Menu -->
	<ul class="">
		<li><a href="#" class="" aria-current="page">Products</a></li>
		<li><a href="#" class="">Pricing</a></li>
		<li><a href="#" class="">Blog</a></li>
		<!-- CTA Button -->
		<li><a href="#" class="">Sign Up</a></li>
	</ul>
	<!-- Mobile Menu Button -->
	<button type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
		</svg>
	</button>
	<!-- Mobile Menu -->
	<ul id="mobileMenu" class="">
		<li class=""><a href="#" class="" aria-current="page">Products</a></li>
		<li class=""><a href="#" class="">Pricing</a></li>
		<li class=""><a href="#" class="">Blog</a></li>
		<!-- CTA Button -->
		<li class=""><a href="#" class="">Sign Up</a></li>
	</ul>
</nav>

With a user profile

A navbar with a user profile dropdown.

Background Color

Penguin

Alice Brown
alice.brown@gmail.com
Products
Pricing
Blog

Dashboard
Subscription
Settings
Sign Out

HTML

<nav class="" aria-label="penguin ui menu">
	<!-- Brand Logo -->
	<a href="#" class="">
		<span>Peng<span class="">ui</span>n</span>
		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
	</a>
	<!-- Desktop Menu -->
	<ul class="">
		<li><a href="#" class="" aria-current="page">Products</a></li>
		<li><a href="#" class="">Pricing</a></li>
		<li><a href="#" class="">Blog</a></li>
		<!-- User Pic -->
		<li class="">
			<button class="" aria-controls="userMenu">
				<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
			</button>
			<!-- User Dropdown -->
			<ul id="userMenu" class="">
				<li class="">
					<div class="">	
						<span class="">Alice Brown</span>
						<p class="">alice.brown@gmail.com</p>
					</div>
				</li>
				<li><a href="#" class="">Dashboard</a></li>
				<li><a href="#" class="">Subscription</a></li>
				<li><a href="#" class="">Settings</a></li>
				<li><a href="#" class="">Sign Out</a></li>
			</ul>
		</li>
	</ul>
	<!-- Mobile Menu Button -->
	<button type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
		</svg>
	</button>
	<!-- Mobile Menu -->
	<ul class="">
		<li class="">
			<div class="">
				<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class=""  />
				<div>
					<span class="">Alice Brown</span>
					<p class="">alice.brown@gmail.com</p>
				</div>	
			</div>
		</li>
		<li class=""><a href="#" class="" aria-current="page">Products</a></li>
		<li class=""><a href="#" class="">Pricing</a></li>
		<li class=""><a href="#" class="">Blog</a></li>
		<hr role="none" class="">
		<li class=""><a href="#" class="">Dashboard</a></li>
		<li class=""><a href="#" class="">Subscription</a></li>
		<li class=""><a href="#" class="">Settings</a></li>
		<!-- CTA Button -->
		<li class=""><a href="#" class="">Sign Out</a></li>
	</ul>
</nav>

With a search

A navbar with a search input.

Background Color

Penguin

Alice Brown
alice.brown@gmail.com
Products
Pricing
Blog

Dashboard
Subscription
Settings
Sign Out

HTML

<nav class="" aria-label="penguin ui menu">
	<!-- Brand Logo -->
	<a href="#" class="">
		<span>Peng<span class="">ui</span>n</span>
		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
	</a>
	<!-- Search -->
	<div class="">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class=""> 
			<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
		</svg>
		<input type="search" name="search" placeholder="Search" aria-label="search" class="" />
	</div>
	<!-- Desktop Menu -->
	<ul class="">
		<li><a href="#" class="" aria-current="page">Products</a></li>
		<li><a href="#" class="">Pricing</a></li>
		<li><a href="#" class="">Blog</a></li>
		<!-- User Pic -->
		<li class="">
			<button class="" aria-controls="userMenu">
				<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
			</button>
			<!-- User Dropdown -->
			<ul id="userMenu" class="">
				<li class="">
					<div class="">	
						<span class="">Alice Brown</span>
						<p class="">alice.brown@gmail.com</p>
					</div>
				</li>
				<li><a href="#" class="">Dashboard</a></li>
				<li><a href="#" class="">Subscription</a></li>
				<li><a href="#" class="">Settings</a></li>
				<li><a href="#" class="">Sign Out</a></li>
			</ul>
		</li>
	</ul>
	<!-- Mobile Menu Button -->
	<button type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
		</svg>
	</button>
	<!-- Mobile Menu -->
	<ul class="">
		<li class="">
			<div class="">
				<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class=""  />
				<div>
					<span class="">Alice Brown</span>
					<p class="">alice.brown@gmail.com</p>
				</div>	
			</div>
		</li>
		<li class=""><a href="#" class="" aria-current="page">Products</a></li>
		<li class=""><a href="#" class="">Pricing</a></li>
		<li class=""><a href="#" class="">Blog</a></li>
		<hr role="none" class="">
		<li class=""><a href="#" class="">Dashboard</a></li>
		<li class=""><a href="#" class="">Subscription</a></li>
		<li class=""><a href="#" class="">Settings</a></li>
		<!-- CTA Button -->
		<li class=""><a href="#" class="">Sign Out</a></li>
	</ul>
</nav>

Data

List of all Alpine JS data used in this component.

Property	Description
mobileMenuIsOpen	Boolean - Indicates whether the menu is open or closed
userDropDownIsOpen	Boolean - Indicates whether the user dropdown menu is open or closed
openWithKeyboard	Boolean - Indicates whether the user dropdown menu is opened using keyboard

Keyboard Navigation

Key	Action
`Tab`	Next item gets the focus
`Enter` `Space`	Focused item gets selected
	Dropdown: Focus moves to next/previous item
`Esc`	Dropdown open: dropdown closes

On this page

Tailwind CSS and Alpine JS Navbar

Default navbar

With a call to action

With a user profile

With a search

Data

Keyboard Navigation

🍪 Got Cookies!