Active Class for Menus

[joeworkman]

This is a continuation of a discussion over at https://github.com/foundation/foundation-sites/discussions/12351#discussioncomment-1930388

@benthien had a question on how to add an active class to his menu items. It's a good question. Here is an example of how you could accomplish this. I think that this could be made better in time.

General Overview:

1. Set the output variable in the front matter of every page. This will specifically define the path to the page when it's built
2. Create an is_active macro that we can use to determine if a page is active or not.
3. Create a partial for the navigation to be included into each of our pages.
4. Include the navigation partial into our page.

pages/one.html

---
output: one.html
---

{% block content %}
    {% include "nav.html" %}
{% endblock %}

macros/nav.twig

{% macro is_active(page, output) %}
{% if output == page %}active{% endif %}
{% endmacro %}

partials/nav.html

{% from "nav.twig" import is_active %}

<ul class="menu">
    <li class="{{ is_active('one.html', output) }}"><a href="one.html">One</a></li>
    <li class="{{ is_active('two.html', output) }}"><a href="two.html">Two</a></li>
    <li class="{{ is_active('three.html', output) }}"><a href="three.html">Three</a></li>
</ul>

[benthien]

A somewhat more general situation is where you have a topbar with several drop down menus. Each dropdown menu has a title that we would like to highlight as well as the selected menu item, i.e., we would like something like

<li class= "active">
  <a href="#">menu title</a>
  <ul class="menu">
    <li>one</li>
    <li class="active"> two</li>
    <li>three</li>
  </ul>
</li>