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


Use the tabs to view the secondary navigation source code.

Use left and right arrows to navigate between tabs.


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