Bootstrap 5 dropdown navbar template set for Contao 5.x

mod_navigation_bootstrap_navbar.html5

<!-- https://gist.github.com/markocupic/9fa8fbd4451b4cf57e81654ffc6fe814 -->
<!-- indexer::stop -->
<nav class="navbar navbar-expand-lg navbar-light bg-light <?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <div class="container-fluid">
    <a class="navbar-brand" href="./">
      <img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      <?php if ($this->headline): ?><?= $this->headline ?><?php endif; ?>
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible d-none"><?= $this->skipNavigation ?></a>
      <?= $this->items ?>
      <a id="<?= $this->skipId ?>" class="invisible d-none">&nbsp;</a>
    </div>
  </div>
</nav>
<!-- indexer::continue -->

nav_bootstrap_dropdown.html.twig

{# https://gist.github.com/markocupic/9fa8fbd4451b4cf57e81654ffc6fe814 #}

{% set levelClass = level %}

<ul class="{% if level == 'level_1' %}navbar-nav {% endif %}{% if level == 'level_2' %}dropdown-menu {% endif %}{{ levelClass }}">
    {% for item in items %}
        {% if level == 'level_1' %}
            {# item has a dropdown menu #}
            {% if not item.subitems is empty %}
                {# Add css class dropdown #}
                <li class="nav-item dropdown{% if item.class|trim|default(false) %} {{ item.class|trim }}{% endif %}">
                    <a class="nav-link dropdown-toggle" href="{{ item.href|default('#') }}" role="button" data-bs-toggle="dropdown" aria-expanded="false" {% if item.accesskey|default(false) %} accesskey="{{ item.accesskey }}"{% endif %}{% if item.tabindex|default(false) %} tabindex="{{ item.tabindex }}"{% endif %}{{ item.target }}{{ item.rel }}>
                        <span itemprop="name">{{ item.link }}</span>
                    </a>
                    {{ item.subitems|raw }}
                </li>
            {% else %}
                <li class="nav-item{% if item.class|trim|default(false) %} {{ item.class|trim }}{% endif %}">
                    <a href="{{ item.href ?: './' }}" title="{{ item.pageTitle ?: "#{item.title}" }}" class="nav-link"{% if item.accesskey|default(false) %} accesskey="{{ item.accesskey }}"{% endif %}{% if item.tabindex|default(false) %} accesskey="{{ item.tabindex }}"{% endif %}{{ item.target }}{{ item.rel }}{% if not item.subitems is empty %} aria-haspopup="true"{% endif %} itemprop="url">
                        <span itemprop="name">{{ item.link }}</span>
                    </a>
                    {{ item.subitems|raw }}
                </li>
            {% endif %}
        {% else %} {# level > 1 #}
            {% if not item.subitems is empty %}
                {# Add css class dropdown #}
                <h6 class="dropdown-header text-primary">{{ item.link }}</h6>
                {{ item.subitems|raw }}
            {% else %}
                <li{% if item.class|default(false) %} class="{{ item.class|trim }}"{% endif %}>
                    <a href="{{ item.href ?: './' }}" class="dropdown-item"{% if item.accesskey|default(false) %} accesskey="{{ item.accesskey }}"{% endif %}{% if item.tabindex|default(false) %} tabindex="{{ item.tabindex }}"{% endif %} itemprop="url">
                        <span itemprop="name">{{ item.link }}</span>
                    </a>
                    {{ item.subitems|raw }}
                </li>
            {% endif %}
        {% endif %}
    {% endfor %}

</ul>

On large screens:

On narrow screens: