or browse the recipes

Dedicated “Structured” Menu Section

Problem

There are many ways to build dynamic navigation using craft, but often you want to combine entries across sections into one universal menu. Using this method makes a dedicated menu section that behaves like Nav-ee or Taxonomy in ExpressionEngine (but built-in of course)!

Solution

Normal Craft Structure menu

Works well in enough most of the time, but limited in that it combines the content structures with the menu structures into a single section. This makes more complex navigations difficult.

{% set pages = craft.entries.section('pages') %}

<ul>
{% nav page in pages %}
    <li>
        <a href="{{ page.url }}">{{ page.title }}</a>

        {% ifchildren %}
            <ul>
                {% children %}
            </ul>
        {% endifchildren %}
    </li>
{% endnav %}
</ul>

A more advanced option allowing navigation across multiple sections

Create a separate “Menu” section and uncheck “Entries in this section have their own URLs.” Save the section and give it two fields.

The user builds their menu anyway they want by adding entries to “menu” structure and then linking to any other entry in the system OR typing a custom URL.

  • relatedEntry - Entries field allowing you to select any other entry
  • customURL - text field for custom url input
{% set menu = craft.entries.section('menu') %}

<ul>
{% nav link in menu %}
    <li>
    
        {% if link.relatedEntry|length %}
                <a href="{{ link.relatedEntry[0].url }}">{{ link.title }}</a>
        {% else %}
                <a href="{{ link.customURL }}">{{ link.title }}</a>
        {% endif %}

        {% ifchildren %}
            <ul>
                {% children %}
            </ul>
        {% endifchildren %}
    </li>
{% endnav %}
</ul>

Submitted by Keith Mancuso on 1st February, 2017