Active nav macro in Zola

March 08, 2025

A little Tera macro—that I'm using with Zola—for tossing an active class onto the navigation item for the current page.

{% macro menu_item(url="/", name) %}
  {% set path = "/" %}
  {% if current_path %}
    {% set path = current_path %}
  {% endif %}

  <li>
    <a class="{% if path is containing(url) %}active{% endif %}" href="{{ url }}">{{ name }}</a>
  </li>
{% endmacro %}

Usage:

{% import 'macros.html' as macros -%}

[...]

<div class="menu">
	<ul>
	  {{ macros::menu_item(url="/writing/", name="writing") }}
	  {{ macros::menu_item(url="/projects/", name="projects") }}
	  {{ macros::menu_item(url="/iota/", name="iota") }}
	</ul>
</div>