Pimcore with twig; render html based on menu depth

Question

I'm using Pimcore 5.4.4 in combination with twig and I'm trying to customize my output. Currently I have this:

$this->setViewAutoRender($event->getRequest(), true, 'php');
$this->view->navigation=$navStartNode;

which I render with this:

{{ pimcore_render_nav(mainNavigation) }}

This does its job, it is however horribly uncustomizable. I want to render an arrow-down icon for the menu Items that have children. Can this be achieved in any way?

To clarify, I would like my markup to look something like this:

<ul>
  <li> m1 </li>
  <li class='hasChildren'><i 'arrow-down'> m2 </i></li>
     <ul>...

which should then display an arrow-icon next to the items which have children.

Any help here would be much appreciated.

Greetings, derelektrischemoench

Answer 1

Is it not possible to overwrite the partial?

See the documentation: https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Individual-Partial-Navigation-View-Script

Answer 2

Here's an entire custom navbar that works for me with Bootstrap 4.3.1 and mdbootstrap 4.8.9, tested with Pimcore 6.2.0:

<header>
    {% set mainNavStartNode = document.getProperty('mainNavStartNode') %}
    {% if mainNavStartNode is empty %}
        {% set mainNavStartNode = pimcore_document(1) %}
    {% endif %}

    {% set mainNav = pimcore_build_nav(document, mainNavStartNode) %}
    {% set renderer = pimcore_nav_renderer('menu') %}
    <nav class="navbar navbar-expand-lg navbar-dark indigo mb-4">

        <!-- Additional container -->
        <div class="container">

            <!-- Navbar brand -->
            <a class="navbar-brand" href="{{ mainNavStartNode }}">
                <img src="{{ asset('static/img/lovia-navbar-white.png') }}" alt="Lovia"
                    style="height: 1.3rem; margin-bottom: 0.4rem;">
                {# <strong>Lovia</strong> #}
            </a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="{{ "Toggle navigation"|trans }}">
                <span class="navbar-toggler-icon"></span></button>

            <!-- Collapsible content -->
            <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
            {% for page in mainNav %}
                {% if page.isVisible() and renderer.accept(page) %}
                    {% if page.hasPages %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.label|trans }}</a>
                        <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                            {% for child in page.pages %}
                            <a class="dropdown-item" href="{{ child.href }}">{{ child.label|trans }}</a>
                            {% endfor %}
                        </div>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ page.href }}">{{ page.label|trans }}</a>
                    </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
            </ul>
            <ul class="navbar-nav ml-auto">
                {{ include('Includes/login.html.twig') }}
                {{ include('Includes/language.html.twig') }}
            </ul>

        </div>
    </nav>
</header>

Adapted from https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Using-Partials-Generating-a-Customized-Navigation