Link Search Menu Expand Document

Footer Template

Apart from the main site navigation the site can have a secondary navigation in the footer template (partials/footer/index.html). One can’t be accessed from the other. The footer is a special kind of partial which is rendered in all site pages, always at the end of the body tag. It contains a schema where variables can be added, removed or edited. The footer template might be used to include additional libraries.

Common examples

Rendering navigation

The essential code to render a 2-level navigation is:

---
max_item_levels: 2
supports_open_new_tab: true
...
---

{% unless footer.items == blank %}
    {% for item in footer.items %}
    <a href="{% if item.url != '' %}{{ item.url }}{% else %}javascript:void(0);{% endif %}"
        {% if item.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
        {{ item.label }}
    </a>
        {% if item.items.size > 0 %}
        <ul>
            {% for nested_item in item.items %}
            <li>
                <a href="{% if nested_item.url != '' %}{{ nested_item.url }}{% else %}javascript:void(0);{% endif %}" 
                {% if nested_item.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                    {{ nested_item.label }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endfor %}
{% endunless %}

Custom variables

All variables defined in the footer’s schema need to be accessed with footer and dot notation:

---
max_item_levels: 2
supports_open_new_tab: true
attributes:
    brand_slogan:
        type: string
        label: Slogan to display below the footer logo
---

<footer>
    {% if footer.brand_slogan %}
    <h6>{{ footer.brand_slogan }}</h6>
    {% endif %}
</footer>