> Simple Navigation Setup in Jekyll 3.9.0

// 372 words // 1 minute read

Simple Navigation Setup in Jekyll 3.9.0

I have found that there is a lot of information on the internet in regards to setting up “dynamic” navigation in Jekyll. The problem I’ve noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out nav elements in Jekyll (3.9.0 as of this writing).

Creating the Directories & Files

In your Jekyll project, at the top level, you need to create a directory called _data. Inside this folder we will be creating a new file called navigation.yml. The contents of this file will contain all your navigation links and they are rendered like so:

- title: Home
  url: /

- title: Articles
  url: /articles/

- title: About
  url: /about/

Dynamically Rendering the Navigation

The next and final step is rendering out the navigation with a simple loop:

{% for item in %}
        <a href="{{ item.url }}"><span>{{ item.title }}</span></a>
{% endfor %}

Highlight Current Page

It’s also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:

{% for item in %}
        {% if item.url == page.url %}
        <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a>
        {% else %}
        <a href="{{ item.url }}"><span>{{ item.title }}</span></a>
        {% endif %}
{% endfor %}

/* Custom styling for active class */
li { color: red; }

Congrats! You now have fully functional, dynamic navigation on your Jekyll site.

Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email