Site Navigation / Menus

Menu locations are registered in config/theme.php. The boilerplate starts with Header Menu and Footer Menu. These are locations within the theme, which are semantic.

    'register_nav_menus' => [
        'header' => 'Primary Menu',
        'footer' => 'Footer Menu',
    ],

Menus are assigned to these locations via Appearance -> Menus in the wordpress Admin Sidebar. One menu can be assigned per location.

Once a menu is assigned to a menu location the menu will be available in global context via:

{{ menus.header }}
{{ menus.footer }}

Tip: If the results of dump() yield no menu array, then most likely a menu has not been assigned to any of the menu locations.

Notably, to access the menu items you need to use the items property.

{{ menus.header.items }}

These then can be looped over, so a simple menu would look like this:

<nav>
    <ul>
        {% for item in menus.header.items %}
            <li>
                <a href="{{ item.url }}" target="{{ item.target }}">{{ item.title }}</a>
            </li>
        {% endfor %}
    </ul>
</nav>

Submenus items can then be looped conditionally if the menu has children.

An expanded menu would then look like this:

<nav>
    <ul>
        {% for item in menus.header.items %}
            <li>
                <a href="{{ item.url }}">{{ item.title }}</a>
                {% if item.children %}
                    <ul>
                        {% for child in item.children %}
                            <li>
                                <a href="{{ child.url }}">{{ child.title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>

The Origins boilerplate has prebuilt basic header-navigation.twig and footer-navigation.twig components in it that are included/rendered in the header.twig and footer.twig files respectively that can be modified to fit specific designs for a site.