Menus

Once you have created a menu system in your sites dashboard, Blutui makes it simple to interact with them from your templates.

Basic

For a flat menu with no submenus, you can use twigs for loop to render out each of the items.

{% set mainMenu = cms.menu('main') %}

<nav>
{% for item in mainMenu.items %}
  <a href="{{ item.href }}">
    {{ item.label }}
  </a>
{% endfor %}
</nav>

Advanced

For menu systems with nested menus, you will need to leverage macros to build your html. These can be imported from another file, or sit next to your html.

{% macro menu(items) %}
  <ul>
    {% for item in items %}
      {{ _self.link(item) }}
    {% endfor %}
  </ul>
{% endmacro %}

{% macro = link(item) %}
	{% if item.active %}
      <li class="{% if request.path == item.href %}active{% endif %}">
        {% if item.route %}
          <a href="{{ item.href }}" {% if item.opens_new_tab %}target="_blank"{% endif %}>
            {{ item.label }}
          </a>
        {% else %}
          <span>{{ item.label }}</span>
        {% endif %}

        {% if item.submenus | length > 0 %}
          {{ _self.list(item.submenus) }}
        {% endif %}
      </li>
	{% endif %}
{% endmacro %}

<nav>
  <ul>
    {% for item in cms.menu('main') %}
      {{ _self.link(item) }}
    {% endfor %}
  </ul>
</nav>
Last Updated: 7/12/2019, 3:13:07 AM