thumb

My Jekyll based website have a small number of first-tier pages that I would like to display in the navigation menu, but I also have some second-tier pages that I would like to not junk up the navigation menu. There are many ways to exclude pages from the navigation menu in Jekyll, but I’m trying to avoid using plugins, because I believe that the simplest solution is to just exclude second-tier pages from the navigation menu entirely. One quick and easy way I found is to simply harness the power of Jekyll’s Front-matter for any page I want to exclude. It’s a simple two-step process.



Step 1. Front-matter section.

Create a custom variable exclude: true in the Front-matter section of the page that you don’t want to be automatically added:

---
title: Some Title
layout: default
exclude: true
---

Step 2. Loop of navigation menu.

Find your main navigation menu template (by default, this is in _includes/header.html file). You need the loop code that locks like this (this is boilerplate Jekyll):

{% for page in site.pages %}
	<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">
		{{ page.title }}
	</a>
{% endfor %}

Now just add an unless clause around the a tag in order to get this:

{% for page in site.pages %}
	{% unless page.exclude %}
		<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">
			{{ page.title }}
		</a>
	{% endunless %}
{% endfor %}

In this loop we ask to check the exclude variable in the Front-matter section of the page, so if this variable is set to true then don’t add this page to navigation menu.

Done! That page is now safely hidden until you link to it in manual way.


Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: