Navigation bar

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

Code

Use the tabs to view the navigation bar source code.

HTML
CSS

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--blog">
          <a href="/posts/">Blog</a>
        </li>
      
        <li class="navigation__item navigation__item--portfolio">
          <a href="/portfolio/">Portfolio</a>
        </li>
      
    </ul>
  </nav>

CSS


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

.navigation {
  margin: 2rem 1rem 1rem 0;
}

.navigation .navigation__item {
  float: left;
  margin: .2rem;
  list-style: none;
  margin: .8rem .8rem .8rem 0;
}
  
.navigation a {
  color: var(--colour-black);
  padding: .4rem;
  text-decoration: none;
  position: relative;
  font-size: 1.1rem;
  border-bottom: solid 3px var(--colour-pink);
}

@media (hover: hover) {
  .navigation .navigation__item a:before,
  .navigation .navigation__item a:after {
    display: block;
    content: '';
    border-bottom: solid 3px var(--colour-white);  
    position: absolute;
    top: 100%;
    transition: width .3s;
    height: 3px;
    width: 0;
  }

  .navigation .navigation__item a:hover:before,
  .navigation .navigation__item a:focus:before {
    width: 100%;
  }

}

.navigation .navigation__item a:hover {
  cursor: hand;
  outline-width: none;
  transition: all .3s ease-in-out;
}

.navigation .navigation__item a:focus {
  outline-color: var(--colour-white);
}

.navigation .navigation__item--current a,
.navigation a:active {
  border-bottom: solid 3px var(--colour-white);
  background:   var(--colour-pink);
}

.navigation__item--current a:hover
.navigation a:active:hover {
  cursor: not-allowed;
}

Back to all components