Control Colour theme
Control Font family

Secondary navigation

Secondary navigation links to content that is of secondary interest to the user.

Secondary navigation should:

  • have clear hover and focus states
  • be distinguishable by more than just colour
  • have desctiptive content

Secondary navigation should not:

  • be hidden from view in a dropdown or behind a toggle

Code

Use the tabs to view the secondary navigation source code.

Use left and right arrows to navigate between tabs.

HTML

        
        
  <nav class="navigation-footer">
  <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 footer
    ----------------------------------- */

.navigation-footer {
  margin: 1.5em auto 2em;
  padding: 0;
  font-size: 1.1em;
  text-align: center;
}

.navigation-footer .navigation__item {
  display: inline-block;
  margin: .4em;
}

.navigation-footer .navigation__item a {
  color: var(--colour-black);
  text-decoration: none;
  display: inline-block;
  border-bottom: solid 3px var(--colour-light);
  position: relative;
}

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

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

}

.navigation-footer .navigation__item a:hover,
.navigation-footer .navigation__item a:focus {
  transition: all .3s ease-in-out;
  color: var(--colour-bright);
}

.navigation-footer .navigation__item--current a,
.navigation-footer .navigation__item a:active {
  color: var(--colour-medium)!important;
  border-bottom: solid 3px var(--colour-medium); 
}


      

Back to all components