Simple Navigation Setup in Jekyll 3.9.0
Detailing the process of setting up dynamic navigation in Jekyll without the hassle
I’ve 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:
Dynamically Rendering the Navigation
The next and final step is rendering out the navigation with a simple loop:
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:
Congrats! You now have fully functional, dynamic navigation on your Jekyll site.