<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="/">{{ this.theme.data.site_brand ? this.theme.data.site_brand : 'HOME'}}</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        {% if __SELF__.menuItems %}
        <ul class="navbar-nav mr-auto">
            {% partial __SELF__ ~ "::layouts/default/items" items=__SELF__.menuItems %}
        </ul>
        {% endif %}

        {% partial "common/utility/search-form" %}

        {% component "localePicker" %}

    </div>
</nav>
