Menüs im Theme ausgeben

Menü per Setting wählbar machen

{ "type": "menu", "id": "main_menu", "label": "Navigation", "default": "main-menu" }

Menü rendern

{% assign nav = menus[section.settings.main_menu] %}
{% if nav %}
<nav>
  <ul>
    {% for item in nav.items %}
    <li>
      <a href="{{ item.link }}" {{ item.editor_attributes }}
         {% if item.open_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
         {% if item.link == page.url %}aria-current="page"{% endif %}>
        {{ item.label }}
      </a>
      {% if item.children.size > 0 %}
      <ul>
        {% for child in item.children %}
        <li><a href="{{ child.link }}" {{ child.editor_attributes }}>{{ child.label }}</a></li>
        {% endfor %}
      </ul>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</nav>
{% endif %}

Eigenschaften eines Menüpunkts

Mega-Menüs

Punkte vom Typ mega sind Container ohne eigenen Link:

{% if item.type == 'mega' %}
  <li class="has-mega">
    <span class="nav-trigger">{{ item.label }}</span>
    <div class="mega-panel">
      {% for child in item.children %}<a href="{{ child.link }}" {{ child.editor_attributes }}>{{ child.label }}</a>{% endfor %}
    </div>
  </li>
{% endif %}

{{ item.editor_attributes }} sorgt dafür, dass Menüpunkte im PageBuilder auf die Zielseite springen. Logo, Social-Icons und Buttons markierst du nicht – sie sollen im Editor nur auswählen.