Nav

Basic

{% component "Nav" as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Basic Nav Element

{% component "Nav" %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
            {% endcomponent %}

Preview:

Tabs

{% component "Nav" variant="tabs" as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Pills

{% component "Nav" variant="pills" as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Underline

{% component "Nav" variant="underline" as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Vertical

{% component "Nav" vertical=True as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Vertical Nav Element

{% component "Nav" vertical=True %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
            {% endcomponent %}

Preview:

Fill

{% component "Nav" variant="pills" fill=True as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Much longer nav link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Fill Nav Element

{% component "Nav" variant="pills" fill=True %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Much longer nav link{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
            {% endcomponent %}

Preview:

Justified

{% component "Nav" variant="pills" justified=True as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Much longer nav link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Justified Nav Element

{% component "Nav" variant="pills" justified=True %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Much longer nav link{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
              {% component "NavLink" disabled=True %}Disabled{% endcomponent %}
            {% endcomponent %}

Preview:

{% component "Nav" variant="pills" as_="ul" %}
              {% component "NavItem" %}
                {% component "NavLink" as_="button" active=True %}Active{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" as_="button" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" as_="button" %}Link{% endcomponent %}
              {% endcomponent %}
              {% component "NavItem" %}
                {% component "NavLink" as_="button" disabled=True %}Disabled{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Custom Attrs

{% component "Nav" attrs:class="custom-nav" %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
            {% endcomponent %}

Preview:

Custom Role

{% component "Nav" role="tablist" %}
              {% component "NavLink" active=True href="#" %}Active{% endcomponent %}
              {% component "NavLink" href="#" %}Link{% endcomponent %}
            {% endcomponent %}

Preview: