<div class="lg:flex lg:n7-background-02 lg:py-2 is-second-last lg:justify-center">
<div class="n7-bottom-bar__container n7-container mx-auto flex items-center justify-center lg:flex-1">
<nav class="n7-primary-navigation justify-center is-bottom-nav-positioned" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn n7-btn--only-text rounded-0 lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu">
Menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col transition-all invisible w-[88%] lg:w-auto fixed lg:static lg:visible top-[--header-height] bottom-0 left-[12%] lg:left-0 border-l n7-border-primary lg:border-l-0 overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0">
<ul class="n7-primary-navigation__list grid lg:flex lg:justify-center gap-2 lg:gap-2.5">
<li>
<a href="" class="n7-primary-navigation__link group w-full flex items-center p-3 gap-2 font-medium hover:underline focus:n7-content-primary text-sm lg:text-base">
Item
</a>
</li>
<li>
<a href="" class="n7-primary-navigation__link group w-full flex items-center p-3 gap-2 font-medium hover:underline focus:n7-content-primary text-sm lg:text-base is-current" aria-current="page">
Current page
</a>
</li>
<li class="n7-dropdown-menu has-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger n7-dropdown-trigger group w-full flex items-center font-medium hover:underline focus:n7-content-primary aria-expanded:n7-background-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01 p-3 gap-2 text-sm lg:text-base" aria-expanded="false" aria-controls="submenumenu-01">
Dropdown<svg class="n7-icon inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden border border-t-0 n7-border-gray-01 lg:w-52 lg:border-t lg:absolute lg:rounded lg:shadow-md border-r-0 border-l-0 lg:border-r lg:border-l" id="submenumenu-01">
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="block p-3 transition bg-white text-sm lg:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
<div class="flex gap-2 items-center">
<span class="grow">Item 1</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="block p-3 transition bg-white text-sm lg:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
<div class="flex gap-2 items-center">
<span class="grow">Item 2</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="block p-3 transition bg-white text-sm lg:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
<div class="flex gap-2 items-center">
<span class="grow">Item 3</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
<a class="block p-3 transition bg-white text-sm lg:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
<div class="flex gap-2 items-center">
<span class="grow">Item 4</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
</div>
</div>
{% extends '@bottom-bar' %}
{% block classes %}{{ super() }} lg:justify-center{% endblock classes %}
{% block content %}
<div class="n7-bottom-bar__container n7-container mx-auto flex items-center justify-center lg:flex-1">
{% render '@primary-navigation', {classes: 'justify-center is-bottom-nav-positioned', navPanelClasses: 'flex-col transition-all invisible w-[88%] lg:w-auto fixed lg:static lg:visible top-[--header-height] bottom-0 left-[12%] lg:left-0 border-l n7-border-primary lg:border-l-0 overflow-y-auto',listHorizontalAlignment:'lg:justify-center', listGap: 'gap-2 lg:gap-2.5',itemFontSize: 'text-sm lg:text-base', itemDropdownFontSize: 'text-sm lg:text-base'}, true %}
</div>
{% endblock %}
{
"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: