<nav aria-label="Secondaria">
<ul class="n7-secondary-navigation grid lg:flex gap-4">
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
Item label 1
</a>
</li>
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
Item label 3
</a>
</li>
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
Item label 4
</a>
</li>
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">
Item label 5
</a>
</li>
</ul>
</nav>
{% if label %}<nav aria-label="{{ label }}">{% endif %}
<ul class="n7-secondary-navigation grid lg:flex{% if listGap %} {{ listGap }} {% else %} gap-4{% endif %}">
{% for item in items %}
<li class="{% if itemClasses %} {{ itemClasses }}{% endif %}{% if separator %} border-r n7-border-gray-01 last:border-r-0 px-4{% endif %}">
{% render '@link',{ label:item.label, classes:'p-2 text-xs lg:text-sm n7-content-01' }, true %}
</li>
{% endfor %}
</ul>
{% if label %}</nav>{% endif %}
{
"label": "Secondaria",
"items": [
{
"label": "Item label 1"
},
{
"label": "Item label 3"
},
{
"label": "Item label 4"
},
{
"label": "Item label 5"
}
]
}
Secondary navigation component.
Configurations: