<div class="lg:flex lg:n7-background-02 lg:py-2 is-second-last">
<nav class="lg:n7-container lg:flex lg:justify-center" aria-label="Label navigazione bottom">
<ul class="grid lg:flex gap-4">
<li class="">
<a href="" class="n7-link p-2 n7-content-01 font-medium text-sm lg:text-base">
Item 1
</a>
</li>
<li class="">
<a href="" class="n7-link p-2 n7-content-01 font-medium text-sm lg:text-base">
Item 2
</a>
</li>
<li class="">
<a href="" class="n7-link p-2 n7-content-01 font-medium text-sm lg:text-base">
Item 3
</a>
</li>
</ul>
</nav>
</div>
<div class="lg:flex{% if bgColor %} {{ bgColor }}{% endif %}{% if verticalSpacing %} {{ verticalSpacing }}{% endif %}{% if positionClass %} {{ positionClass }}{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
{% block content %}
<nav class="lg:n7-container lg:flex lg:justify-center{% if navClasses %} {{ navClasses }}{% endif %}" aria-label="{{ label }}">
<ul class="grid lg:flex{% if listGap %} {{ listGap }}{% endif %}{% if listClasses %} {{ listClasses }}{% endif %}">
{% for item in items %}
<li class="{% if item.classes %}{{ item.classes }}{% endif %}">
{% render '@link', { label: item.label, classes:'p-2 n7-content-01 font-medium text-sm lg:text-base' }, true %}
</li>
{% endfor %}
</ul>
</nav>
{% endblock %}
</div>
{
"label": "Label navigazione bottom",
"verticalSpacing": "lg:py-2",
"bgColor": "lg:n7-background-02",
"positionClass": "is-second-last",
"listGap": "gap-4",
"items": [
{
"label": "Item 1"
},
{
"label": "Item 2"
},
{
"label": "Item 3"
}
]
}
Header bottom bar component Configurations:
Blocks: