Lego2012
2/2/2017 - 2:10 PM

Easily Editable Navigation Menus

Easily Editable Navigation Menus

<!-- excerpt from /_includes/masthead.html -->

<header class="masthead">
  <div class="container">
    <a class="masthead__title" href="https://mademistakes.com/">Made Mistakes</a>
    <nav id="nav-primary" class="masthead__menu-wrapper">
      {% for link in site.data.navigation.masthead %}
        <ul class="masthead__menu">

          {% assign class = nil %}
          {% if page.url contains link.url %}
            {% assign class = 'is--active' %}
          {% endif %}

          <li><a href="{{ site.url }}{{ link.url }}" class="masthead__menu-item {{ class }}">{{ link.title }}</a></li>
        </ul>
      {% endfor %}
    </nav>
  </div>
</header>
# In an effort to build a DRY navigation menu for this site I created /_data/navigation.yml and added the following four links

# masthead navigation links
masthead:
  - title: "About"
    url: /about/
  - title: "Work"
    url: /work/
  - title: "Blog"
    url: /articles/
  - title: "Mastering Paper"
    url: /mastering-paper/