Navs

On this page

# Intro

Navs can be created by using the nav element and are classless by default. You can add a brand and groups to control how your nav functions.

<nav>
	<div class="brand">Brand</div>
	<div class="group">
		<a>Home</a>
		<a>Link</a>
		<div class="dropdown -right">
			<a class="dropdown-toggle" tabindex="0">
				<div class="avatar">
					<img src="/images/avatar.png" alt="Avatar">
				</div>
			</a>
			<div class="content">
				<ul class="menu">
					<li class="item"><a>Profile</a></li>
					<li class="item"><a>Settings</a></li>
					<li class="divider"></li>
					<li class="item"><a>Logout</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>

# Groups

The group class is used to group elements by using flex and will justify to the end. Groups are not responsive or collapse by default. See below on how to make groups collapse on smaller screens.

<nav>
	<div class="brand">Brand</div>
	<div class="group">
		<a>Link</a>
	</div>
	<div class="group">
		<button>Button</button>
	</div>
</nav>

# Collapsable

You can make responsive or collapsable navs by adding the -collapsable modifier and a checkbox, with a nav-toggle class, with a label and adding the -collapse modifier to groups that should collapse on smaller screens.

<nav class="-collapsable">
	<input type="checkbox" id="nav-toggle" class="nav-toggle">
	<label for="nav-toggle"><i class="icon lni lni-menu"></i></label>
	<div class="brand">Brand</div>
	<div class="group">
		<form style="width: 190px;">
			<div class="inputs">
				<input type="text" class="--rounded-left-full" placeholder="search">
				<button type="submit" class="addon --border-left-0 --rounded-right-full" aria-label="Search"><i class="lni lni-search-alt"></i></button>
			</div>
		</form>
	</div>
	<div class="group -collapse">
		<a href="test">Home</a>
		<a href="test">Link</a>
	</div>
	<div class="group -collapse">
		<div class="dropdown -right">
			<a class="dropdown-toggle" tabindex="0">
				<div class="avatar">
					<img src="/images/avatar.png" alt="Avatar">
				</div>
			</a>
			<div class="content">
				<ul class="menu">
					<li class="item"><a>Profile</a></li>
					<li class="item"><a>Settings</a></li>
					<li class="divider"></li>
					<li class="item"><a>Logout</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>

# Transparent

You can make a nav transparent by using the -transparent modifier which removes the background and box-shadow. You should pair a transparent nav with other color utilities.

<nav class="-transparent">
	<div class="brand --color-blue-darken">Brand</div>
	<div class="group">
		<a class="_color-red --hover-color-pink-darken">Link</a>
	</div>
	<div class="group">
		<button class="-primary">Button</button>
	</div>
</nav>