Jekyll - Automatically highlight current tab in menu bar

Question

I am using github to host a static site and Jekyll to generate it.

I have a menu bar (as

) and would like the
• correspo

Answer 1

Similar to @ben-foster's solution but without using any jQuery

I needed something simple, this is what I did.

In my front matter I added a variable called active

e.g.

---
layout: generic
title:  About
active: about
---

I have a navigation include with the following section

    

        {% if page.active == "home" %}
            
Home
        {% else %}
            
Home
        {% endif %}
        {% if page.active == "blog" %}
            
Blog
        {% else %}
            
Blog
        {% endif %}
        {% if page.active == "about" %}
            
About
        {% else %}
            
About
        {% endif %}
    

This works for me as the amount of links in the navigation are very narrow.