<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>
<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 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="submenumenu-01">
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="submenumenu-01">
<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">Guida ai componenti</p>
<p class="mt-2 text-sm text-gray-600">Trova tutti i componenti disponibili per il tuo progetto. Organizzati per categorie e funzionalità.</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>Layout & Structure</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="/components/grid" 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">
Grid System
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/flexbox" 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">
Flexbox Utilities
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/container" 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">
Container
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/spacing" 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">
Spacing
</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 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>Form Elements</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="/components/inputs" 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">
Input Fields
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/buttons" 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">
Buttons
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/checkboxes" 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">
Checkboxes & Radio
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/selects" 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">
Select & Dropdown
</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 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>Navigation</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="/components/navigation" 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">
Main Navigation
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/breadcrumbs" 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">
Breadcrumbs
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/pagination" 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">
Pagination
</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 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>Content Display</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="/components/cards" 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">
Cards
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/tables" 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">
Tables
</a>
</li>
<li class="n7-megamenu-subitem border-b n7-border-gray-01 last:border-b-0 lg:border-b-0 lg:py-1">
<a href="/components/lists" 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">
Lists
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
<nav class="n7-primary-navigation{% block classes %}{% if classes %} {{ classes }}{% endif %}{%- endblock classes -%}" 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">
{% render '@icon--small', { id: 'mini--bars-3', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden', size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
{% render '@icon--small', { id: 'mini--x-mark', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block', size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
<span class="sr-only is-show-menu">
Menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel{% if navPanelClasses %} {{ navPanelClasses }}{% endif %}" 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 {{ listHorizontalAlignment }} {% if listGap %} {{ listGap }}{% endif %}">
{% for firstLevel in firstLevels %}
{% if firstLevel.hasSubItems %}
{% render '@dropdown-menu--megamenu', { listItem: true, label: firstLevel.label, id: 'submenumenu-01', classes: 'n7-primary-navigation__item', triggerAriaExpandedStyles: itemTriggerAriaExpandedStyles, listPosition: dropdownListPosition, listWidth: dropdownListWidth, listClasses: itemClasses, triggerTextColor: itemTriggerTextColor, triggerFontSize: itemFontSize, dropdownItemFontSize: itemDropdownFontSize, items: dropdownItems }, true %}
{% else %}
<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 {{ itemFontSize }}{% if firstLevel.isCurrent %} is-current{% endif %}" {% if firstLevel.isCurrent %} aria-current="page"{% endif %}>
{{ firstLevel.label }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% if hasSearchPanel %}
<!-- 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">
{% render '@input-field', {
classes: 'flex-1',
label: 'Cerca servizi, informazioni, aiuti...',
input: {
id: 'inputSearchMobile',
type: 'search',
placeholder: 'Cerca',
radius: 'rounded-l-lg rounded-r-none',
iconPlaceholder: 'mini--magnifying-glass'
}
}, true %}
<button type="button" class="n7-btn n7-btn--secondary n7-btn--icon w-12 h-12">
<span class="sr-only">Cerca</span>
{% render '@icon--small', { id: 'mini--magnifying-glass', size: 'w-5 h-5' }, true %}
</button>
</form>
</div>
{% endif %}
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
{
"navId": "mainNavPanel",
"classes": "flex lg:justify-end",
"navPanelClasses": "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",
"listHorizontalAlignment": "lg:justify-end",
"listGap": "gap-4 xl:gap-8",
"itemClasses": "border-r-0 border-l-0 lg:border-r lg:border-l",
"itemFontSize": "text-sm lg:text-base",
"itemDropdownFontSize": "text-sm xl:text-base",
"dropdownListWidth": "lg:w-52",
"firstLevels": [
{
"label": "Item"
},
{
"label": "Current page",
"isCurrent": true
},
{
"label": "Megamenu",
"hasSubItems": true,
"isMegamenu": true,
"leftPanel": {
"title": "Titolo pannello",
"description": "Descrizione del pannello sinistro"
},
"rightPanelItems": [
{
"text": "Categoria 1",
"href": "/categoria-1",
"children": [
{
"text": "Sottoelemento 1",
"href": "/categoria-1/sotto-1"
},
{
"text": "Sottoelemento 2",
"href": "/categoria-1/sotto-2"
}
]
},
{
"text": "Categoria 2",
"href": "/categoria-2"
},
{
"text": "Categoria 3",
"href": "/categoria-3",
"children": [
{
"text": "Sottoelemento 3",
"href": "/categoria-3/sotto-3"
}
]
}
]
}
],
"dropdownItems": [
{
"label": "Item 1"
},
{
"label": "Item 2"
},
{
"label": "Item 3"
},
{
"label": "Item 4"
}
]
}
/**
* PRIMARY NAVIGATION
*
*/
@layer components {
.n7-primary-navigation__panel {
@apply translate-x-full lg:transform-none;
}
.n7-primary-navigation__panel.is-open {
@apply bg-white translate-x-0 visible flex z-20 left-[12%];
}
body.overflow-hidden .n7-primary-navigation__backdrop,
:root.overflow-hidden .n7-primary-navigation__backdrop {
@apply fixed right-0 bottom-0 left-0 lg:hidden z-10;
}
.n7-primary-navigation__link.is-current {
@apply n7-content-02 relative after:absolute after:block after:n7-background-secondary after:h-0.5 after:w-full after:left-0 after:bottom-0;
}
/* MOBILE MENU */
.n7-primary-navigation__module {
@apply p-2 lg:p-0 grid items-start lg:block lg:flex-1 border-b n7-border-gray-01 last:border-b-0;
}
}
Primary navigation component. Includes dropdown component
Configurations:
Blocks: