Cacher is the code snippet organizer for pro developers

/* Styling Example: */

nav a {
  text-decoration: none;
}

nav li {
  line-height: 25px;
  font-size: 14px;
  text-transform: uppercase;
}

nav li.current a {
  color: #111;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

/* 
As extra sugar, you got li.first and li.last as well to style those navigation items. 
*/

# Define navigation list in your _config.yml:

navigation:
 - title: Home
   url: /index.html

 - title: Projects
   url: /projects.html

 - title: About
   url: /about.html

 - title: Contact
   url: /contact.html

<!-- Use following HTML code in your layout file: -->
<nav>
  <ul>
    {% for link in site.navigation %} 
      {% assign current = nil %} 

      {% if page.url contains link.url %} 
        {% assign current = 'current' %} 
      {% endif %}
    
      <li class="element {% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>