Link Search Menu Expand Document

Header

The main site navigation can be managed by Creators in My Site > Header or any site page. Its template can be edited in the menu template (partials/menu/index.html). Please note that the terms “Header” and “Menu” might be used interchangeably.

The menu is a special kind of partial which is rendered in all site pages, always at the start of the body tag. It contains a schema where variables can be added, removed or edited. The site navigation and all its attributes can be accessed through the menu object. Refer to it for a full reference and examples.

Common examples

Rendering navigation

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

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

{% for item in menu.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 %}

Custom variables

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

---
max_item_levels: 2
supports_open_new_tab: true
attributes:
    festival_announcement:
        type: string
        label: A special announcement
---

<header>
    {% if menu.festival_announcement %}
        <h6>{{ menu.festival_announcement }}</h6>
    {% endif %}
</header>