A WebHook Nav.

a-webhook-nav.md

Nav Partial

Make a partial file for your navigation. This example will use the file path templates/partials/nav.html. Within this partial include the following, but modify the navData array to fit your project.

{# Set this per project #}
{% set navData = [{
		name: 'Home',
		url:  '/'
	}, {
		name: 'Graduating Students',
		url:  '/graduating-students'
	}, {
		name: 'For Families',
		url:  '/for-families'
	}, {
		name: 'The Weekend',
		url:  '/the-weekend'
	}, {
		name: 'Contact',
		url:  '/contacts'
	}]
%}

{# Logic of setting active class. #}
{% if navActive %}
	{% for navItem in navData %}
		{% if navItem.name === navActive %}
			{% set navItem.cls = 'active' %}
		{% endif %}
	{% endfor %}
{% endif %}

{% for navItem in navData %}
	{% if loop.first %}
	<nav>
	<ul>
	{% endif %}

	<li class="{{ navItem.cls }}">
		<a href="{{ navItem.url }}">{{ navItem.name }}</a>
	</li>

	{% if loop.last %}
	</ul>
	</nav>
	{% endif %}
{% endfor %}

Include in base

In templates/partials/base.html, include this block.

{% block navigation %}
{% include "templates/partials/nav.html" %}
{% endblock %}

Set active item per page

In any page, you can set the active item, which should refer to one of the navData object's name value. Given the example above, drop the following into your page template, just after your extends statement.

{% set navActive = 'Home' %}