Responsive Pattern Library

Navigation

A website's navigation is the most important tool to the user. It should provide quick access to all the website has to offer. It should also not get in the way. Below are examples of popular responsive patterns that make navigation websites easy on both small and large screens.

Simple StackView Pattern

Easy This pattern is very simple and easy to implement. The navigation does not change much from small to large screen. All pages can be seen at once and sometimes shift under the page title on smaller screens.

Pros:
This requires very little code
This is great for smaller websites with fewer navigation items

Cons:
Harder to scale up for larger website with more information/content and navigation items

Example

HTML


<header class="clearfix">
	<h1>Logo</h1>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Our Portfolio</a></li>
			<li><a href="#">Our Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</nav>
</header>

CSS


header h1 {
	margin-bottom: 0.25em;
}

nav li {
	list-style: none;
	padding: 0.25em 0.5em 0 0;
}
	nav li a {
		text-decoration: none;
	}


@media only screen and (min-width: 750px){
	header h1 {
		float: left;
		margin:0;
	}

	nav {
		float: right;
	}
		nav li {
			display: inline-block;
		}
}

Anchor and Footer View Pattern

Easy This pattern consists of a jump link in the header that links to a menu in the Anchor. It is easy to create but the jump to the bottom of the page can be jarring.

Pros:
Content is not pushed down even further by longer navigations
Can accommodate for medium navigations (+-8 links) since it is only taking up space at the bottom of the page
Very easy to implement

Cons:
The jump from the top of the page to the bottom can be jarring
Long navigations can still get unruly
Navigation can be missed

Example

HTML


<header class="clearfix">
	<h1>Logo</h1>
	<a class="menu-btn" href="#menu">Menu</a>
</header>

<div class="content">
	<p>Content goes here.</p>
</div>

<footer>
	<div class="footer-inner">
		<h3>Footer</h3>
		<nav id="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Our Portfolio</a></li>
				<li><a href="#">Our Services</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</div>
</footer>

CSS


.menu-btn {
	float:right;
}

header h1 {
	float: left;
}

nav li {
	list-style: none;
	padding: 0.50em;
}
	nav li a {
		text-decoration: none;
	}

footer {
	padding: 0.75em;
}

@media screen and (min-width: 750px) {
	.menu-btn {
		display: none;
	}

	nav {
		position: absolute;
		top:0.75em;
		right:0.75em;
	}
		nav li {
			display: inline-block;
		}
}

The ToggleView Pattern

Medium The next two patterns are the most common RWD navigational patterns and will need JS. The toggle is a navigation that is hidden in a drawer on small devices. The drawer can then be toggled open and shut using JS.

Pros:
This pattern can hold larger navigation systems
This takes up zero pixels when closed

Cons:
This still cannot hold huge navigation systems

Example

HTML


<body>
	<header>
		<div class="header-inner">
			<h1>Logo</h1>
			<button class="menu-toggle">Menu</button>
		</div>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Our Portfolio</a></li>
				<li><a href="#">Our Services</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</header>
</body>

CSS


header {
	padding:0;
}
	header h1 {
		float: left;
	}

nav {
	padding: 0.75em;
	background: lightgray;
	display: none;
}
	nav li {
		padding: 0.25em 0 0 0.5em;
	}
		nav a {
			display: block;
		}

.menu-toggle {
	float: right;
	text-decoration: none;
	padding: 0.5em;
	border: 1px solid lightgray;
	border-radius: 3px;
}

.menu-toggle:hover {
	background-color: lightgray;
}

.open nav {
	display: block;
}


@media screen and (min-width: 750px) {
	.menu-toggle {
		display: none;
	}

	nav {
		overflow: auto;
		display: block;
	}
		nav ul {
			float: right;
		}
			nav li {
				display: inline-block;
			}
}

JavaScript


var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {
	document.getElementsByTagName('body')[0].classList.toggle('open');
}

Off Canvas (Navigation)View Pattern

Medium This navigation is hidden off screen on smaller resolutions until the menu button is clicked. The page then moves to the side, making the off canvas navigation appear to be shifted back on stage.

Pros:
This pattern can accommodate larger navigations
This navigation does does not take up screen real estate when closed
This is an elegant solution

Cons:
This may not play well with more complex layouts that are also positioning elements relative to the viewport

Example

HTML


<body>
	<div class="on-canvas">
		<header>
			<div class="header-inner">
				<h1>Logo</h1>

				<button href="#" class="menu-toggle">Menu</button>

				<nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Our Portfolio</a></li>
						<li><a href="#">Our Services</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</nav>
			</div>
		</header>
	</div>

	<nav class="off-canvas">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Our Portfolio</a></li>
			<li><a href="#">Our Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</nav>
</body>

CSS


h1 {
	display: inline;
}

nav {
	padding: 0.75em;
}

	nav li {
		padding: 0.25em 0 0 0.5em;
	}

	nav a {
		display: block;
	}

.menu-toggle {
	float: right;
	text-decoration: none;
	padding: 0.5em;
	border: 1px solid lightgray;
	border-radius: 3px;
}

	.menu-toggle:hover {
		background-color: lightgray;
	}

.on-canvas nav {
	display: none;
}

.off-canvas {
	display: none;
	width: 200px;
	position: absolute;
	right:0;
	top:0;
	bottom:0;
	background: lightgray;
}

.open .off-canvas {
	display: block;
}

.open .on-canvas {
	width: 100%;
	position: absolute;
	left: -200px;
}


@media screen and (min-width: 750px) {
	nav li {
		display: inline-block;
	}

	.menu-toggle {
		display: none;
	}

	.open .on-canvas {
		position: static;
	}

	.on-canvas nav {
		display: inline-block;
		float:right;
	}

	.open .off-canvas {
		display: none;
	}
}

JavaScript


var menuTog = document.getElementsByClassName("menu-toggle")[0];

menuTog.onclick = function() {
document.getElementsByTagName('body')[0].classList.toggle('open');
}

The Overlay View Pattern

Medium When this navigation is open on smaller screens it takes up the whole screen and covers the page. The menu is then centered on top of a usually slightly transparent background. The whole navigation is an overlay on top of the page; hence the name.

Pros:
This pattern allows the user to focus on the navigation since it is taking up the whole screen

Cons:
This pattern still cannot hold complex navigation systems

Example

HTML


<header>
	<div class="header-inner">
		<h1>Logo</h1>
		<button href="#" class="menu-toggle">Menu</button>
		<nav>
			<button class="close">×</button>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Our Portfolio</a></li>
				<li><a href="#">Our Services</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</div>
</header>

CSS


h1 {
	display: inline;
}

nav {
	padding: 0.75em;
}
	nav li {
		padding: 0.25em 0 0 0.5em;
	}
	nav a {
		display: block;
	}

.menu-toggle {
	float: right;
	text-decoration: none;
	padding: 0.5em;
	border: 1px solid lightgray;
	border-radius: 3px;
}
	.menu-toggle:hover {
		background-color: lightgray;
	}

nav {
	display: none;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(255,255,255, 0.8);
	text-align: center;
}

	nav ul {
		position: absolute;
		top:  50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	nav a {
		font-size: 2em;
		margin: 0.5em 0;
		line-height: 1;
	}

.close {
	border:0;
	background: transparent;
	font-size: 2em;
	color: black;
	position: absolute;
	right:0;
}

.open nav {
	display: block;
}

.open .menu-toggle {
	display: none;
}


@media screen and (min-width: 750px) {
		nav {
			display: block;
			position: static;
			background: transparent;
			text-align: left;
			float: right;
		}
			nav ul {
				position: static;
				transform: translate(0,0);
			}
			nav li {
				display: inline-block;
			}
			nav a {
				font-size: 1em;
			}

	.menu-toggle, .close {
		display: none;
	}
}

JavaScript


var menuTog = document.getElementsByClassName("menu-toggle")[0];
var closeTog = document.getElementsByClassName("close")[0];
var body = document.getElementsByTagName("body")[0];

menuTog.onclick = function() {
	body.classList.toggle('open');
}

closeTog.onclick = function() {
	body.classList.toggle('open');
}

Navigation

Simple StackView Pattern

Pros:

Cons:

Example

HTML

CSS

Anchor and Footer View Pattern

Pros:

Cons:

Example

HTML

CSS

The ToggleView Pattern

Pros:

Cons:

Example

HTML

CSS

JavaScript

Off Canvas (Navigation)View Pattern

Pros:

Cons:

Example

HTML

CSS

JavaScript

The Overlay View Pattern

Pros:

Cons:

Example

HTML

CSS

JavaScript