<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 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 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>
</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', { 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": "Item",
"hasSubItems": true
}
],
"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: