Excluding page from Jekyll navigation bar

Question

I am setting up a basic Github-hosted Jekyll website (so minimal, I am not even bothering to change the default theme). I have a nested site with a small number of first-tie

Answer 1

It is possible to create a multi-level, context-sensitive navigation like you described without plugins, I have done it.

The only caveat is that you need to maintain a YAML data file with your menu hierarchy - with my approach, it's not possible to generate this automatically from your directory structure.

I'll show the short version here, but I have a way more detailed explanation on my blog:

• Building a pseudo-dynamic tree menu with Jekyll
• Example project on GitHub

---

1. Create a YAML data file (/_data/menu.yml) which contains your menu hierarchy:

- text: Home
  url: /
- text: First menu
  url: /first-menu/
  subitems:
    - text: First menu (sub)
      url: /first-menu/first-menu-sub/
      subitems:
        - text: First menu (sub-sub)
          url: /first-menu/first-menu-sub/first-menu-sub-sub/
- text: Second menu
  url: /second-menu/
  subitems:
    - text: Second menu (sub)
      url: /second-menu/second-menu-sub/

---

2. Create an include file (/_includes/nav.html) with the following content:

{% assign navurl = page.url | remove: 'index.html' %}

{% for item in include.nav %}
    

        
            {% if item.url == navurl %}
                {{ item.text }}
            {% else %}
                {{ item.text }}
            {% endif %}
        
    
    {% if item.subitems and navurl contains item.url %}
        {% include nav.html nav=item.subitems %}
    {% endif %}
{% endfor %}

This include file will take care of showing the correct navigation for each page:

• showing the next level of subitems only for the current page
• displaying the current page in bold

If you don't understand what exactly the include file is doing under the covers, read my blog post - I explained it there, in great detail (in the section "The recursive include file").

---

3. In your main layout file, embed the include file:

{% include nav.html nav=site.data.menu %}

This will display the navigation there.
Note that I'm passing the complete data file from step 1 to the include.

---

That's all!

As I said in the beginning:

The only disadvantage of this approach is that each time you create a new page, you also need to insert the page's title and URL into the data file.

But on the other hand, this makes it very easy to exclude some pages from the navigation: you just don't add them to the data file.