Pimcore with twig; render html based on menu depth - twig

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