{% load cms_tags frontend %}{% spaceless %}
    <nav{{ instance.get_attributes }}>
        {% if instance.navbar_container %}<div class="container">{% endif %}
        {% for plugin in instance.child_plugin_instances %}
            {% if plugin.plugin_type == "NavBrandPlugin" %}
                {% render_plugin plugin %}
            {% endif %}
        {% endfor %}
        <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav{{ instance.id|safe }}" aria-controls="nav{{ instance.id|safe }}" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        {% if instance.navbar_container %}</div>{% endif %}
    </nav>
    <div class="offcanvas offcanvas-end" id="nav{{ instance.id|safe }}">
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                {% for plugin in instance.child_plugin_instances %}
                    {% if plugin.plugin_type != "NavBrandPlugin" %}
                        {% with forloop=parentloop parent=instance %}{% render_plugin plugin %}{% endwith %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endspaceless %}
<style>
    html.cms-toolbar-expanded .offcanvas-header {
        margin-top: 3rem;
    }
</style>
