Using Jekyll Data Files and Includes to Build Maintainable Navigation

When a Jekyll site grows beyond a handful of pages, updating shared elements such as a navigation menu or a list of resources becomes tedious.

Decouple Content with Data Files

Any YAML or JSON file placed in the _data directory is automatically exposed as site.data during the build.

Worked example: a navigation menu

Create _data/nav.yml:

# _data/nav.yml
- name: Home
  url: /
- name: Blog
  url: /blog/
- name: About
  url: /about/

Then in your default layout (_layouts/default.html) iterate over the collection:

<nav>
  {% for link in site.data.nav %}
    {{ link.name }}
  {% endfor %}
</nav>

Keep HTML DRY with Includes

If the navigation markup is more complex, extract it into a partial.

Create _includes/nav.html:

<nav class="site-nav">
  {% for link in site.data.nav %}
    {{ link.name }}
  {% endfor %}
</nav>

Use it in any layout:

{% include nav.html %}

Trade‑offs and Verification

Because Liquid is processed at build time, you must rebuild the site after editing _data/nav.yml to see changes. Very large data files can increase build time; consider splitting them or fetching data client‑side for massive sites.

To verify, run jekyll build and inspect the generated _site/index.html for the expected navigation markup.