Navigation - Patterns

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

Various methods for navigating or changing views.

An alternate navigation scheme, focused on actions as opposed to page destinations.

<nav class="action-menu">
	<ul class="action-menu__list">
		<li class="action-menu__item"><a class="action-menu__link" href="#">Create or remove tokens</a></li>
		<li class="action-menu__item"><a class="action-menu__link" href="#">Check a feed’s retrieval status</a></li>
		<li class="action-menu__item"><a class="action-menu__link" href="#">Manage subscriptions</a></li>
		<li class="action-menu__item"><a class="action-menu__link" href="#">Create an API request</a></li>
	</ul>
</nav>

A less prominent version of the action list, used as a sort of sidebar set of actions. Works well to modify a current view (as documented here, changing the timeframe of a set of data between hourly, daily, or monthly).

Toggle pattern display width

<nav class="action-menu  action-menu--secondary">
	<ul class="action-menu__list">
		<li class="action-menu__item"><a class="action-menu__link" href="#">Hourly</a></li>
		<li class="action-menu__item"><a class="action-menu__link" href="#">Daily</a></li>
		<li class="action-menu__item"><a class="action-menu__link" href="#">Monthly</a></li>
	</ul>
</nav>

Used in the Hero pattern, provides navigation for the marketing site. Can be used with or without other content in the Hero pattern—when used without, the hero just collapses to the height of the navigation.

Toggle pattern display width

<div class="container container--front">
	<div class="header-logo"><a title="Superfeedr Home" href="/"><img src="/assets/img/logo.svg" alt="Superfeedr"> <span>Superfeedr</span></a></div>
	<nav class="nav-header">
		<ul class="nav-items">
			<li class="nav-item"><a class="nav-link" href="/publisher">Publishers</a></li>
			<li class="nav-item"><a class="nav-link" href="/subscriber">Subscribers</a></li>
			<li class="nav-item"><a class="nav-link" href="/tracker">Trackers</a></li>
			<li class="nav-item"><a class="nav-link" href="/pricing">Pricing</a></li>
			<li class="nav-item"><a class="nav-link nav-link-bubble" href="/login">Login</a></li>
			<li class="nav-item"><a class="nav-link nav-link-bubble" href="/users/new">Sign Up</a></li>
		</ul>
	</nav>
</div>

Constant throughout the application-side UI, provides a quick anchor for the user to access their settings or log out.

Toggle pattern display width

<nav class="user-menu">
	<div class="user-menu__user-info">
		<p class="user-menu__photo-container">
			<img class="user__photo" src="/assets/img/pattern-library/gravatar.png">
		</p>
		<p class="user-menu__message">Hi <span class="user__name">User</span>!</p>
	</div>

	<ul class="user-menu__list">
		<li class="user-menu__item"><a class="user-menu__link" href="">Account Settings</a></li>
		<li class="user-menu__item"><a class="user-menu__link" href="">Log Out</a></li>
	</ul>
</nav>

Superfeedr Patterns › Navigation

Action list

Action list (secondary)

Hero header navigation

User menu