树枝导航宏

Question

I'm trying to create a nested navigation menu using a PHP array and outputting it using Twig. I'm using Yii2 as the PHP framework. My goal to achieve two things:

• Add a .active automatically to the nested/children items (they should be able to be deeper than 2 levels).

• Automatically get the parent slug on the item.url , so you don't need to type it out on every child in the array.

Here's the PHP array:

return [
    [
        'label' => 'Home',
        'url' => '/',
    ],
    [
        'label' => 'About',
        'url' => 'about',
        'children' => [
            [
                'label' => 'Secondary 1',
                'url' => 'secondary-1',
            ],
            [
                'label' => 'Secondary 2',
                'url' => 'secondary-2',
            ],
        ],
    ],
    [
        'label' => 'Foo',
        'url' => 'foo',
        'children' => [
            [
                'label' => 'Bar',
                'url' => 'bar',
            ],
        ],
    ],
];

And here's the Twig template code so far:

{% macro nav(navigation) %}
    {% import _self as macros %}

    {% for item in navigation %}
        {% set active = app.request.getPathInfo starts with item.url or item.url == '/' and app.request.getPathInfo is empty %}

        <li>
            <a href="{{ baseUrl }}/{{ item.url|trim('/',side='left') }}" {{ active ? 'class="active"' : '' }}>{{ item.label }}</a>
            {% if item.children is iterable %}
                <ul>
                    {{ macros.nav(item.children) }}
                </ul>
            {% endif %}
        </li>

    {% endfor %}
{% endmacro %}

{% import _self as macros %}

<nav id="navigation" class="navigation" role="navigation">
    <div class="container">

        <ul>
            {{ macros.nav(navigation) }}
        </ul>

    </div>
</nav>

Answer 1

In order to get the full URL it is required that you pass your current URL down into the recursion.

{% macro nav(navigation, parent) %}
    {% import _self as macros %}

    {% for item in navigation %}
        {% set active = app.request.getPathInfo starts with item.url or item.url == '/' and app.request.getPathInfo is empty %}

        <li>
            <a href="http://www.example.com/{{ parent |default('') }}{{ item.url|trim('/') }}" {{ active ? 'class="active"' : '' }}>{{ item.label }}</a>
            {% if not item.children|default([]) is empty %}
                <ul>
                    {{ macros.nav(item.children|default([]), (parent?:'')~item.url~'/') }}
                </ul>
            {% endif %}
        </li>

    {% endfor %}
{% endmacro %}