Site Navigation

Note that the Site Navigation contains the Choose a Shake component.

Logged In

<nav class="site-nav">
	<button
		type="button"
		class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
	>
		☰
	</button>
	<ul class="site-nav--list">
		<li class="site-nav--item site-nav--shake-list">
			<div class="choose-a-shake">
				<button
					type="button"
					class="choose-a-shake--toggle btn btn-success btn-pastel"
				>
					Shakes
					<span class="caret"></span>
				</button>
				<div class="choose-a-shake--dropdown">
					<ul class="top-shakes">
						<li><a href="#">Friend Shake</a></li>
						<li><a href="#">Your Shake</a></li>
						<li><a href="#">Your Favorites</a></li>
						<li><a href="#">Popular</a></li>
						<li><a href="#">Incoming!!!</a></li>
					</ul>
					<ul class="group-shakes">
						<li>
							<a href="#"
								>Shake for Long Names Like
								Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a
							>
						</li>
						<li><a href="#">Barbarella</a></li>
						<li><a href="#">Dune</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li class="site-nav--item site-nav--conversations">
			<a class="btn btn-success btn-pastel" href="#">Conversations</a>
		</li>
		<li class="site-nav--item site-nav--search">
			<a class="btn btn-success btn-pastel" href="#">Search</a>
		</li>
		<li class="site-nav--item site-nav--upload">
			<a class="btn btn-primary btn-shadow" href="">New Post</a>
		</li>
	</ul>
</nav>

Expanded

On small screens, the navigation is collapsed into a hamburger menu. This is what it looks like expanded. (view on small screens)

Open in new tab

<nav class="site-nav is-expanded">
	<button
		type="button"
		class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
	>
		☰
	</button>
	<ul class="site-nav--list">
		<li class="site-nav--item site-nav--shake-list">
			<div class="choose-a-shake">
				<button
					type="button"
					class="choose-a-shake--toggle btn btn-success btn-pastel"
				>
					Shakes
					<span class="caret"></span>
				</button>
				<div class="choose-a-shake--dropdown">
					<ul class="top-shakes">
						<li><a href="#">Friend Shake</a></li>
						<li><a href="#">Your Shake</a></li>
						<li><a href="#">Your Favorites</a></li>
						<li><a href="#">Popular</a></li>
						<li><a href="#">Incoming!!!</a></li>
					</ul>
					<ul class="group-shakes">
						<li>
							<a href="#"
								>Shake for Long Names Like
								Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a
							>
						</li>
						<li><a href="#">Barbarella</a></li>
						<li><a href="#">Dune</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li class="site-nav--item site-nav--conversations">
			<a class="btn btn-success btn-pastel" href="#">Conversations</a>
		</li>
		<li class="site-nav--item site-nav--search">
			<a class="btn btn-success btn-pastel" href="#">Search</a>
		</li>
		<li class="site-nav--item site-nav--upload">
			<a class="btn btn-primary btn-shadow" href="">New Post</a>
		</li>
	</ul>
</nav>

Logged Out

Open in new tab

<nav class="site-nav">
	<button
		type="button"
		class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
	>
		☰
	</button>
	<ul class="site-nav--list">
		<li class="site-nav--item site-nav--popular">
			<a class="btn btn-warning btn-pastel" href="#">Popular</a>
		</li>
		<li class="site-nav--item site-nav--signup">
			<a class="btn btn-primary btn-shadow" href="#">Sign Up!</a>
		</li>
	</ul>
</nav>

Logged Out with Callout

A "call out" is added when a logged-out user is on any page other than the homepage or the sign up page.

Open in new tab

<nav class="site-nav">
	<button
		type="button"
		class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
	>
		☰
	</button>
	<ul class="site-nav--list">
		<li class="site-nav--item site-nav--popular">
			<a class="btn btn-warning btn-pastel" href="#">Popular</a>
		</li>
		<li class="site-nav--item site-nav--signup">
			<div class="call-out">
				Join us! Sign up to post images and create your own shake.
			</div>
			<a class="btn btn-primary btn-shadow" href="#">Sign Up!</a>
		</li>
	</ul>
</nav>