Navbar

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Brand{% endcomponent %}
                {% component "NavbarToggler" / %}
                {% component "NavbarCollapse" %}
                    {% component "NavbarNav" %}
                        {% component "NavItem" %}
                            {% component "NavLink" href="#" active=True %}Home{% endcomponent %}
                        {% endcomponent %}
                        {% component "NavItem" %}
                            {% component "NavLink" href="#" %}Features{% endcomponent %}
                        {% endcomponent %}
                        {% component "NavItem" %}
                            {% component "NavLink" href="#" %}Pricing{% endcomponent %}
                        {% endcomponent %}
                        {% component "NavItem" %}
                            {% component "NavLink" href="#" disabled=True %}Disabled{% endcomponent %}
                        {% endcomponent %}
                    {% endcomponent %}
                {% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="sm" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Brand{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="md" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Brand{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="xl" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Brand{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="xxl" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Brand{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            {% endcomponent %}

{% component "Navbar" attrs:class="bg-light" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" attrs:class="bg-primary" attrs:data-bs-theme="dark" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container="sm" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container="md" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container="lg" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container="xl" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container="xxl" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Disabled Brand{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}
                    <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24" class="d-inline-block align-text-top">
                    Bootstrap
                {% endcomponent %}
            {% endcomponent %}

{% component "Navbar" attrs:class="bg-body-tertiary" %}
                {% component "NavbarBrand" href="#" %}Navbar w/ text{% endcomponent %}
                {% component "NavbarText" %}
                    Navbar text with an inline element
                {% endcomponent %}
            {% endcomponent %}

{% component "Navbar" attrs:class="navbar-dark bg-dark" variant="dark" %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}

{% component "Navbar" expand="lg" attrs:class="bg-body-tertiary" container=False %}
                {% component "NavbarBrand" href="#" %}Navbar{% endcomponent %}
            {% endcomponent %}