Control Colour theme
Control Font family

Navigation bar

A navigation bar links to the main site content.

A navigation bar should:

  • be clear and easy to recognise
  • be descriptive
  • signpost users to important content
  • have clear hover and focus states

A navigation bar should not:

  • be hidden from view in a dropdown or behind a toggle
  • contain more then 7 links


Use the tabs to view the navigation bar source code.

Use left and right arrows to navigate between tabs.


  <nav class="navigation">
    <ul class="navigation__list">
        <li class="navigation__item navigation__item--home">
          <a href="/">Home</a>
        <li class="navigation__item navigation__item--about-me">
          <a href="/about-me/">About me</a>
        <li class="navigation__item navigation__item--now">
          <a href="/now/">Now</a>
        <li class="navigation__item navigation__item--projects">
          <a href="/projects/">Projects</a>
        <li class="navigation__item navigation__item--posts">
          <a href="/posts/">Posts</a>
        <li class="navigation__item navigation__item--postcss">
          <a href="/postcss-plugins/">PostCSS</a>
        <li class="navigation__item navigation__item--components">
          <a href="/components/">Components</a>



  ----------------------------------- */

.navigation {
  margin: 1em 0;

.navigation .navigation__list {
  padding: 0 1em;
  display: grid;
  grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  text-align: center;

.navigation .navigation__item {
  justify-content: center;
  margin: .2em;
  list-style: none;
  /* hyphens: auto; */
  border: solid 1px var(--colour-medium);
  background: var(--colour-dark);
.navigation a {
  color: var(--colour-light);
  padding: .4em .8em;
  border-bottom: 0;
  border-left: 3px solid var(--colour-bright);
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--colour-bright) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 99% bottom;

.navigation a:hover,
.navigation a:focus {
  color: var(--colour-bright);
  text-decoration: underline;
  background-position: 95% bottom;
  transition: all .3s ease-in-out;
.navigation .navigation__item--current a,
.navigation a:active {
  background: var(--colour-white);
  color: var(--colour-dark);
  text-decoration: underline;

.navigation a:active:hover {
  text-decoration: none;
  cursor: not-allowed;


Back to all components