liquid data files includes

Introduction

My favourite way to handle navigation in Jekyll is using a data file. It allows you to control the navigation items in a central file and separate them for the navigation logic. It also has much better performance on larger sites than our simple navigation tutorial.

Instructions

  1. Create a yml data file for the navigation items at _data/navigation.yml.

  2. Inside _data/navigation.yml create an array of navigation items where each item has a link and a name:

    - link: /
  name: Home
- link: /about/
  name: About
- link: /services
  name: Services
- link: /contact/
  name: Contact

  3. Create _includes/navigation.html. This file iterates over the navigation data file and outputs the links and adds a class="active" if it’s the current page:

    <nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if item.link == page.url %}class="active"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

Usage

You can use the navigation in your layout by doing an include:

{% include navigation.html %}

Extending

This method is easily extendable to fit your situation. For example you might want to highlight particular links with a red border. You can add this meta data to _data/navigation.yml:

- link: /
  name: Home
- link: /about/
  name: About
  highlight: true
- link: /services
  name: Services
  highlight: true
- link: /contact/
  name: Contact

And then use it in the include:

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if item.highlight %}style="border: 1px solid red;"{% endif %} {% if item.link == page.url %}class="active"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>