Index, Projects, About, Links

Applying the active class for the current page in Jekyll

Create a data file navigation.yml file and write your nav text and urls within a folder _data .

- text: About
  url: /about/

- text: Projects
  url: /projects/

- text: Work
  url: /work/

In your page you’re going to create a loop through your data menu list from yaml file and add an active class if the current page’s url matches the link.

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

Add CSS for active class. a {
    color: lightgray;
    cursor: default;

To make sure the navigation.url (stored in the YAML file) matches the page.url, it can be helpful to print the {{ page.url }} to the page.