Control Colour theme
Control Font family

Navigation bars

A navigation bar links to the main site content.

Navigation bars should:

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

Navigation bars should not:

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

Code

Use the tabs to view the navigation bars source code.

Use left and right arrows to navigate between tabs.

HTML

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

      

CSS


  /*
  Navigation
  ----------------------------------- */

.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