Highlight the current page in Jekyll navigation

Highlighting the current page makes a navigation menu easier to scan. In Jekyll, you only need a data file and a small Liquid condition.

Create _data/navigation.yml and add the navigation labels and URLs:

- text: About
  url: /about/

- text: Projects
  url: /projects/

- text: Work
  url: /work/

Then loop through the items in your navigation template. When an item’s URL matches page.url, add the active class:

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

Now style the active link:

li.active a {
  color: lightgray;
  cursor: default;
}

The match must be exact, including leading and trailing slashes. If the class does not appear, temporarily print {{ page.url }} on the page and compare it with the URL in navigation.yml.

This keeps the navigation in one data file and lets Jekyll handle the current-page state without JavaScript.

← Back to all articles