<h3>Main nav item</h3>

<p>
    The <code>main_nav_item</code> component creates navigation items
    specifically for the main site navigation menu. Main navigation usually wrapped in the <code>header</code> component
    and may look broken outside of it.
</p>


{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.main_nav) -%}
            {{ ui.main_nav_item("First", href="") }}
            {{ ui.main_nav_item("Second", href="", active=true) }}
            {{ ui.main_nav_item("Third", href="") }}
        {%- endcall %}

        {%- call ui.util.call(ui.header) -%}
            {%- call ui.util.call(ui.main_nav) -%}
                {{ ui.main_nav_item("First", href="") }}
                {{ ui.main_nav_item("Second", href="", active=true) }}
                {{ ui.main_nav_item("Third", href="") }}
            {%- endcall %}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}