<div class="n7-main-heading bg-white flex items-center px-4 py-3 lg:p-4 border-b n7-border-primary lg:border-b-0 md-max-w-480-min-h:fixed md-max-w-480-min-h:top-[--header-top-position] md-max-w-480-min-h:right-0 md-max-w-480-min-h:left-0 md-max-w-480-min-h:z-30">
<div class="n7-main-heading__container n7-container mx-auto flex items-center flex-1">
<div class="n7-site-branding n7-branding flex items-center site-branding lg:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex n7-logo--main auto" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</a>
</div>
<div class="n7-main-headings__center flex-1 lg:ml-auto lg:justify-end">
<nav class="n7-primary-navigation flex lg:justify-end" 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 bg-white 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 lg:overflow-visible" 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-end gap-4 xl:gap-8">
<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 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="dropdown-2">
Dropdown normale<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="dropdown-2">
<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 xl: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 xl: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 xl: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 xl: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>
<li class="n7-dropdown-menu has-dropdown-menu has-dropdown-menu relative 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 text-gray-700" aria-expanded="false" aria-controls="megamenu-3">
Megamenu<svg class="n7-icon inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<!-- MEGAMENU CONTENT -->
<div class="n7-dropdown-menu__list hidden border n7-border-gray-01 bg-white lg:shadow-lg
lg:absolute top-full left-0 right-0 z-50
min-w-full w-auto
lg:min-w-[800px] lg:max-w-[1000px] lg:w-auto lg:right-auto
border-r-0 border-l-0 lg:border-r lg:border-l" id="megamenu-3">
<div class="overflow-hidden rounded-lg">
<div class="flex flex-col lg:flex-row">
<!-- Left Panel -->
<div class="w-full lg:w-1/3 bg-gray-50 p-4 lg:p-6 border-b n7-border-gray-01 lg:border-b-0 lg:border-r lg:border-r-gray-200">
<div class="relative lg:border-l-4 lg:border-blue-500 lg:pl-5">
<p class="font-semibold text-gray-900">Titolo pannello</p>
<p class="mt-2 text-sm text-gray-600">Descrizione del pannello sinistro</p>
</div>
</div>
<!-- Right Panel with menu items -->
<div class="w-full lg:w-2/3 p-4 lg:p-6">
<ul class="n7-megamenu-list flex flex-col lg:grid lg:grid-cols-1 lg:md:grid-cols-2 list-none m-0 p-0">
<li class="n7-megamenu-item border-b n7-border-gray-01 last-of-type:border-b-0 lg:border-b-0 lg:rounded-md">
<!-- Item con sottomenu -->
<div class="n7-megamenu-dropdown group w-full lg:bg-gray-50 lg:rounded-md">
<button type="button" class="n7-megamenu-trigger w-full flex items-center p-3 text-sm font-medium text-gray-900 lg:rounded-md text-left transition-colors duration-200 hover:underline focus:n7-background-02" aria-expanded="false" data-dropdown-trigger>
<svg class="mr-3 h-5 w-5 transition-transform duration-200" viewBox="0 0 24 24" fill="currentColor" data-dropdown-icon>
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>
<span>Categoria 1</span>
</button>
<!-- Sottomenu -->
<ul class="n7-megamenu-submenu hidden overflow-hidden bg-gray-50 lg:bg-transparent lg:px-3 lg:py-3 list-none m-0 p-0 transition-all duration-200" data-dropdown-content>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/categoria-1/sotto-1" class="n7-megamenu-sublink block text-sm lg:text-xs text-gray-600 p-3 lg:p-0 lg:pl-8 lg:pb-2.5 lg:py-1 transition-colors duration-200 hover:underline hover:n7-background-02 focus:n7-background-02">
Sottoelemento 1
</a>
</li>
</ul>
</div>
</li>
<li class="n7-megamenu-item border-b n7-border-gray-01 last-of-type:border-b-0 lg:border-b-0 lg:rounded-md">
<!-- Item semplice -->
<div class="n7-megamenu-dropdown lg:bg-gray-50 lg:rounded-md">
<a href="/categoria-2" class="n7-megamenu-link group flex items-center p-3 text-sm font-medium text-gray-900 w-full transition-colors duration-200 lg:rounded-md hover:underline hover:n7-background-02 focus:n7-background-02">
<svg class="mr-3 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>
Categoria 2
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Mobile search in panel -->
<div class="n7-primary-navigation__module is-main lg:hidden is-last-element">
<form role="search" class="flex items-end p-3">
<div class="n7-input-field gap-1 flex-1 ">
<label for="inputSearchMobile" class="n7-input-field__label">
Cerca servizi, informazioni, aiuti...
</label>
<div class="n7-input has-icon">
<svg class="n7-icon inline-block align-middle fill-current n7-input__icon" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="inputSearchMobile" class="rounded-l-lg rounded-r-none text-sm n7-input-placeholder" type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="n7-btn n7-btn--secondary n7-btn--icon w-12 h-12">
<span class="sr-only">Cerca</span>
<svg class="n7-icon inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
</form>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
</div>
</div>
</div>
<div class="n7-main-heading bg-white flex items-center px-4 py-3 lg:p-4 border-b n7-border-primary lg:border-b-0 md-max-w-480-min-h:fixed md-max-w-480-min-h:top-[--header-top-position] md-max-w-480-min-h:right-0 md-max-w-480-min-h:left-0 md-max-w-480-min-h:z-30{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
<div class="n7-main-heading__container n7-container mx-auto flex items-center flex-1">
{#{% block siteBranding %}
<div class="flex items-center n7-branding site-branding lg:max-w-[35.7%]{% if logoDivider %}{% else %}gap-4 md:gap-10{% endif %}">
{% render '@logo',{ href: '#', path: logoPath, size: logoSize, objectFit: logoObjectFit}, true %}
{% if logoDivider === 'true' %}
{% render '@vertical-divider',{ width: verticalDividerWidth },true%}
{% endif %}
{% if secondLogo === 'true' %}
{% render '@logo', { href: '#', path: secondLogoPath, size: secondLogoSize, objectFit: secondLogoObjectFit}, true %}
{% endif %}
</div>
{% endblock siteBranding %}#}
{% block siteBranding %}
{# rtds-w-auto rtds-h-10 sm:rtds-flex-1 md:rtds-h-14 lg:rtds-h-auto #}
<div class="n7-site-branding n7-branding flex items-center site-branding lg:max-w-[35.7%]{% if logoDivider %}{% else %}gap-4 md:gap-10{% endif %}">
{% render '@logo--main', { href: '#', path: logoPath, size: logoSize, objectFit: logoObjectFit, classes: logoClasses, width: logoWidth, height: logoHeight}, true %}
{% if logoDivider === 'true' %}
{% render '@vertical-divider', { width: 'n7-w-4 n7-h-10 md:n7-w-10 md:n7-h-20', classes: verticalDividerClasses }, true %}
{% endif %}
{% if secondLogo === 'true' %}
{% render '@logo--secondary', { href: '#', path: secondLogoPath, size: secondLogoSize, objectFit: secondLogoObjectFit, classes: secondLogoClasses, width: secondLogoWidth, height: secondLogoHeight}, true %}
{% endif %}
</div>
{% endblock siteBranding %}
{% block primaryNav %}
<div class="n7-main-headings__center flex-1 lg:ml-auto lg:justify-end">
{% render '@primary-navigation--dropdown-megamenu',{ hasSearchPanel: true }, true %}
</div>
{% endblock primaryNav %}
{% block rightArea %}
{% block headingActions %}
{% endblock headingActions %}
{% endblock rightArea %}
</div>
</div>
{
"logoSize": "auto",
"logoObjectFit": "object-cover md:object-contain",
"verticalDividerWidth": "w-4 h-10 md:w-10 md:h-20",
"logoDivider": true,
"secondLogo": true,
"secondLogoSize": "w-auto",
"secondLogoObjectFit": "object-contain"
}
Includes components: