Navbar

A navbar creates a responsive navigation header, with a logo, links, subnav menus, and more.

Usage

Add the .navbar class to a <nav> element, and include an unordered list of links.

You can optionally include a standalone link with the .logo class to include a logo that’s styled differently from regular links.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">🔍</a></li>
	</ul>
</nav>

Multiple Menus

You can add multiple menus to a .navbar. By default, they’ll create a split layout.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<!-- ... -->
	</ul>
	<ul>
		<!-- ... -->
	</ul>
</nav>

If you want separate nav menus to be grouped together, you can wrap them in an element with the .menu class.

In larger viewports, they’ll be displayed together. In smaller viewports, they’ll stack.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<div class="menu">
		<ul>
			<!-- ... -->
		</ul>
		<ul>
			<!-- ... -->
		</ul>
	</div>
</nav>

Icon Logos

If you’re using an inline SVG as your logo icon, set the fill property to currentColor and the icon will change color on :hover just like text would.

<nav class="navbar">
	<a 
		class="logo" 
		href="#" 
		aria-label="Go Make Things"
	>
		<svg 
			fill="currentColor" 
			height="1.2em" 
			width="1.2em" 
			viewBox="0 0 16 16" 
			aria-hidden="true"
			xmlns="http://www.w3.org/2000/svg" 
		>
			<path d="M14 9v2.066c-1.258 1.285-3.016 2.526-5 2.852V8.001h3v-1L9 5.83A3.001 3.001 0 0 0 8 .001 3 3 0 0 0 7 5.83L4 7.001v1h3v5.917c-1.984-.326-3.742-1.567-5-2.852V9H0v1c0 2 4 6 8 6s8-4 8-6V9h-2zM9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
		</svg>
	</a>
	<ul>
		<!-- ... -->
	</ul>
</nav>

Calls-to-Action

Navigation menus often include calls-to-action styled as buttons to make them stand out more.

You can use the .btn class to style a link as a button, and the color and style classes to adjust the color, background color, brightness, and more.

<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<!-- ... -->
		<li><a class="btn secondary" href="#">Join</a></li>
	</ul>
</nav>

Wrapping

In smaller viewports, the .logo and navigation menus stack on-top of each other. Items within a nav menu automatically wrap if needed.

You can surpress this behavior by adding the .no-wrap utility class to the .navbar.

<nav class="navbar no-wrap">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">🔍</a></li>
	</ul>
</nav>

Alignment

When navigation items wrap in smaller viewports, the .logo and navigation menus justify in the center of the page.

If you would prefer that items justify to the start (the left, in left-to-right languages), you can modify the --justify CSS variable on the .navbar.

You can modify the behavior globally in a custom CSS file…

@layer kelp.extend {
	.navbar {
		--justify: start;
	}
}

Or on an individual .navbar with inline CSS…

<nav class="navbar" style="--justify: start">
	<!-- ... -->
</nav>

Controlling Width

The .navbar expands to the full-width of its parent container.

You can use the .container classes to make the .navbar as wide or narrow as you’d like.

<!-- A very wide navbar -->
<header class="container-2xl">
	<nav class="navbar">
		<!-- ... -->
	</nav>
</header>

<!-- A rather narrow navbar -->
<header class="container-s">
	<nav class="navbar">
		<!-- ... -->
	</nav>
</header>

Background Colors

You can use the .fill class or the .callout class to add a background color to your .navbar.

Use .fill when you want the color to run the full width of the page…

<div class="fill">
	<header class="container-xl">
		<nav class="navbar">
			<!-- ... -->
		</nav>
	</header>
</div>

And .callout when you’d prefer the header have a floating appearance.

<header class="container-xl">
	<nav class="callout navbar">
		<!-- ... -->
	</nav>
</header>

Both .fill and .callout can be paired with the various color and style classes to create a variety of designs.

<nav class="navbar callout vivid secondary">
	<!-- ... -->
</nav>

Styling Nav Links

By default, .navbar links look mostly like ordinary links. This provides a relatively blank slate for you to style them however you’d like rather than forcing a particular aesthetic on you.

The Kelp Cookbook (coming soon) includes a few recipes for customizing nav links, including…

• Styled underlines on :hover
• Background colors on :hover
• Styling the link associated with the current page
• Changing the .logo font
• Changing the nav link colors