Navbar

Default

Use .navbar for primary navigation.

<nav class="navbar">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>

Background colors

Combine .navbar with a background utility.

<nav class="navbar bg-primary">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>
<nav class="navbar bg-secondary">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>
<nav class="navbar bg-success">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>
<nav class="navbar bg-warning">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>
<nav class="navbar bg-error">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>

Inverse navbar

Use .bg-inverse for automatic contrasting text.

<nav class="navbar bg-inverse">
	<div class="container">
		<span class="h4 mb-0">Nav Title</span>
	</div>
</nav>

Logo

Use .navbar-logo for the brand link.

<nav class="navbar bg-surface">
	<div class="container">
		<a class="navbar-logo" href="#">Navbar Logo</a>
	</div>
</nav>

CSS Variables

Override these variables on the component or an ancestor.

--navbar-bg-color: var(--bg-surface);
--navbar-text-color: var(--text-color);
--navbar-padding-y: var(--spacer-2);
--navbar-padding-x: var(--spacer-0);
--navbar-min-height: 3.75rem;
--navbar-link-color: var(--navbar-text-color);
--navbar-link-hover-color: var(--action-color-hover);
--navbar-link-active-color: var(--action-color-active);
--navbar-logo-hover-color: var(--action-color-hover);
--navbar-logo-active-color: var(--action-color-active);