Search code examples
jekyllliquid

Jekyll. Liquid: Specify active/current state for exceptional nav item


Website has multiple backgrounds. To make navigation more intuitive additional class (in this example in CSS will target .active.projects) needs to be added to one of the nav items (in this case, /projects/).

My take which does not work is the 2nd elsif. / is used for homepage.

      {% assign links = site.data.navigation %}
      {% for link in links %}
        {% assign class = nil %}
        {% if page.url == link.url %}
          {% assign class = 'active' %}
          {% elsif link.url != '/' and page.url contains link.url %}
          {% assign class = 'active' %}
          {% elsif link.url == '/projects/' and page.url contains link.url %}
          {% assign class = 'active projects' %}
        {% endif %}
          <li class="{{ class }}">
            <a href="{{ site.url }}{{ site.baseurl }}{{ link.url }}">{{ link.name }}</a>
          </li>
      {% endfor %}

navigation.yml

- name: Home
  url:  /
- name: Blog
  url: /blog/
- name: Projects
  url: /projects/
- name: About
  url: /about/

How to specify active state for exceptional nav item?


Solution

  • Change the order:

      {% assign links = site.data.navigation %}
      {% for link in links %}
        {% assign class = nil %}
        {% if page.url == link.url and link.url != '/projects/' %}
          {% assign class = 'active' %}
        {% elsif link.url == '/projects/' and page.url contains link.url %}
          {% assign class = 'active projects' %}
        {% elsif link.url != '/' and page.url contains link.url %}          
          {% assign class = 'active' %}
        {% endif %}
      {% endfor %}