wp-bootstrap/views/partials/header-centered.html.twig

<header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="{{ __('Primary navigation') }}">
        <div class="container flex-column">
            <a class="navbar-brand fw-bold mb-2" href="{{ site.url|esc_url }}">
                {{ site.name }}
            </a>
            {% if site.description %}
                <p class="text-body-secondary small mb-2">{{ site.description }}</p>
            {% endif %}

            <button class="navbar-toggler" type="button"
                    data-bs-toggle="collapse" data-bs-target="#navbarMain"
                    aria-controls="navbarMain" aria-expanded="false"
                    aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarMain">
                <ul class="navbar-nav mb-2 mb-lg-0">
                    {% for item in menu %}
                        {% if item.children|length > 0 %}
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle{{ item.active ? ' active' : '' }}"
                                   href="{{ item.url|esc_url }}" role="button"
                                   data-bs-toggle="dropdown" aria-expanded="false">
                                    {{ item.title }}
                                </a>
                                <ul class="dropdown-menu">
                                    {% for child in item.children %}
                                        <li>
                                            <a class="dropdown-item{{ child.active ? ' active' : '' }}"
                                               href="{{ child.url|esc_url }}"
                                               {% if child.active %}aria-current="page"{% endif %}
                                               {% if child.target %}target="{{ child.target }}"{% endif %}>
                                                {{ child.title }}
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link{{ item.active ? ' active' : '' }}"
                                   href="{{ item.url|esc_url }}"
                                   {% if item.active %}aria-current="page"{% endif %}
                                   {% if item.target %}target="{{ item.target }}"{% endif %}>
                                    {{ item.title }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>

                {% if dark_mode %}
                    {% include 'partials/dark-mode-toggle.html.twig' %}
                {% endif %}
            </div>
        </div>
    </nav>
</header>