Components: navigation
A wee design system's library
Navigation #
The navigation bar enables shifting between the essential pages. It should be evident without taking up too much space, especially on mobile.
Guidelines
- The navigation bar—or navbar—is a list of links that redirect users to other pages. Given its fundamental browsing role, it must be available at all times. One way to achieve this is by using a sticky navigation bar that stays on top of the page.
- Whenever possible, keep under four the total items in the navbar. That reduces the need for a hamburger menu on mobile devices.
- However, the secondary navigation menu—or aside—can have up to ten elements.
- Identify the current page on the navbar with a thicker underline. It may allow the users to know their location on the website.
- To label each item, use as few words as possible. It eases the creation of compact menus that are easier to read and occupy the less real state.
- Use sentence case for the texts, which means that only the first word starts with a capital letter.
Code snippets
Main navigation
Dark text (#f8f8f8) over a light-coloured area. A thicker accent underline identifies the current page. If contrast is inadequate, use an accessible colour combination.
This navigation bar is sticky, which means that it stays invariably on top of the page.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<nav class="nav-main">
<ul>
<li><a href="#0">Item 1</a></li>
<li><a href="#0">Item 2</a></li>
<li><a class="current" href="#0">Item 3</a></li>
</ul>
</nav>
CSS
.nav-main ul {
display: flex;
grid-auto-flow: column;
justify-content: space-between;
list-style: none;
max-width: 15rem;
}
.nav-main li {
font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
margin-right: 1.602rem;
}
.nav-main a:link, .nav-main a:visited {
background-color: transparent;
color: #2f2f2f;
cursor: pointer;
padding-left: 0;
}
.nav-main a:hover, .nav-main a:visited:hover {
text-decoration: none;
}
a.current:link, a.current:visited {
border-bottom: 3px solid #f96c53;
border-radius: 0;
cursor: unset;
padding: 0;
text-decoration: none;
}
Dark main navigation
Light text (#2f2f2f) over a dark-coloured area. A thicker accent underline identifies the current page. If contrast is inadequate, use an accessible colour combination.
This navigation bar is sticky, which means that it stays invariably on top of the page.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<nav class="nav-main">
<ul>
<li><a href="#0">Item 1</a></li>
<li><a href="#0">Item 2</a></li>
<li><a class="current" href="#0">Item 3</a></li>
</ul>
</nav>
CSS
.nav-main ul {
display: flex;
grid-auto-flow: column;
justify-content: space-between;
list-style: none;
max-width: 15rem;
}
.nav-main li {
font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
margin-right: 1.602rem;
}
.nav-main a:link, .nav-main a:visited {
background-color: transparent;
color: #f8f8f8;
cursor: pointer;
padding-left: 0;
}
.nav-main a:hover, .nav-main a:visited:hover {
text-decoration: none;
}
a.current:link, a.current:visited {
border-bottom: 3px solid #f96c53;
border-radius: 0;
cursor: unset;
padding: 0;
text-decoration: none;
}
Aside navigation
Dark text (#f8f8f8) over a light-coloured area. A thicker accent underline identifies the current page. If contrast is inadequate, use an accessible colour combination.
Unlike the sticky main navbar, this navigation menu goes along with the flow of the page. Most of their items are active links, but some of them may be temporarily disabled.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<nav class="nav-aside">
<ul>
<li><a href="#0">Item 1</a></li>
<li><a class="current" href="#0">Item 2</a></li>
<li class="disabled">Item 3<span class="upcoming">—Upcoming</span></li>
</ul>
</nav>
CSS
.nav-aside li {
font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
margin-right: 1.602rem;
}
.nav-aside a:link, .nav-aside a:visited {
background-color: transparent;
color: #2f2f2f;
cursor: pointer;
fill: #2f2f2f;
padding-left: 0;
}
.nav-aside a:hover, .nav-aside a:visited:hover {
text-decoration: none;
}
a.current:link, a.current:visited {
border-bottom: 3px solid #f96c53;
border-radius: 0;
cursor: unset;
padding: 0;
text-decoration: none;
}
.nav-aside ul {
display: block;
list-style: none;
margin-top: 3rem;
position: unset;
}
@supports (display: grid) {
@media (min-width: 600px) {
.nav-aside ul {
position: absolute;
top: 8rem;
}
}
}
.nav-aside li {
margin: 1.125rem 0;
}
.upcoming {
font: italic 1rem/1.6 'Georgia', Helvetica, sans-serif;
}
.disabled {
color: #4f4f4f;
}
Dark aside navigation
Light text (#2f2f2f) over a light-coloured area. A thicker accent underline identifies the current page. If contrast is inadequate, use an accessible colour combination.
Unlike the sticky main navbar, this navigation menu goes along with the flow of the page. Most of their items are active links, but some of them may be temporarily disabled.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<nav class="nav-aside">
<ul>
<li><a href="#0">Item 1</a></li>
<li><a class="current" href="#0">Item 2</a></li>
<li class="disabled">Item 3<span class="upcoming">—Upcoming</span></li>
</ul>
</nav>
CSS
.nav-aside li {
font: 700 1rem/1.2 'Raleway', Helvetica, sans-serif;
margin-right: 1.602rem;
}
.nav-aside a:link, .nav-aside a:visited {
background-color: transparent;
color: #f8f8f8;
cursor: pointer;
padding-left: 0;
}
.nav-aside a:hover, .nav-aside a:visited:hover {
text-decoration: none;
}
a.current:link, a.current:visited {
border-bottom: 3px solid #f96c53;
border-radius: 0;
cursor: unset;
padding: 0;
text-decoration: none;
}
.nav-aside ul {
display: block;
list-style: none;
margin-top: 3rem;
position: unset;
}
@supports (display: grid) {
@media (min-width: 600px) {
.nav-aside ul {
position: absolute;
top: 8rem;
}
}
}
.nav-aside li {
margin: 1.125rem 0;
}
.upcoming {
font: italic 1rem/1.6 'Georgia', Helvetica, sans-serif;
}
.disabled {
color: #8f8f8f;
}
Sources of inspiration
- Basic Patterns for Mobile Navigation—Nielsen Norman Group
- Navigation—Shopify's design system
- Navigation drawer—Material Design