Primary Navigation: Megamenu

Ready

HTML
View
Context
Assets
Info
Notes


        
        <nav class="rtds-primary-navigation
   rtds-primary-navigation--megamenu has-megamenu
" aria-label="Principale" id="siteNavWrapper">
    <button type="button" class="rtds-btn rtds-btn--only-text rtds-rounded-0 lg:rtds-hidden rtds-ml-auto rtds-btn--icon rtds-group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
        <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0
    rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform
    group-hover:rtds-translate-none is-show-menu
    group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
            <use href="../../icons.svg#mini--bars-3" />
        </svg>

        <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0 rtds-transition-all
    rtds-duration-200 rtds-ease-out rtds-transform
    group-hover:rtds-translate-none is-close-menu rtds-hidden
    group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
            <use href="../../icons.svg#mini--x-mark" />
        </svg>

        <span class="rtds-sr-only is-show-menu">
            Menu
        </span>
    </button>
    <!-- Mobile panel -->
    <div class="rtds-primary-navigation__panel" id="mainNavPanel">
        <!-- Main nav -->
        <div class="rtds-primary-navigation__module is-main lg:rtds-border-b-0">
            <ul class="rtds-primary-navigation__list ">

                <li class="rtds-primary-navigation__item">
                    <a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg">
                        Temi e servizi
                    </a>
                </li>

                <li class="rtds-primary-navigation__item">
                    <a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg">
                        Bandi e opportunità
                    </a>
                </li>

                <li class="rtds-primary-navigation__item">
                    <a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg">
                        Regione
                    </a>
                </li>

                <li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item has-megamenu">
                    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  aria-expanded:rtds-sticky aria-expanded:rtds-z-30 aria-expanded:rtds-top-0 aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-border-b-4 aria-expanded:rtds-border-gray-02 lg:aria-expanded:rtds-border-b-0 rtds-p-3 rtds-gap-2 rtds-text-base xl:rtds-text-lg rtds-primary-navigation__first-level rtds-primary-navigation__link" aria-expanded="false" aria-controls="submenumenu-01">

                        Dropdown item

                        <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-hidden rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>
                        <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-hidden lg:rtds-inline-flex rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-down" />
                        </svg>

                    </button>

                    <div class="rtds-dropdown-menu__megamenu lg:rtds-top-[--header-offset]  rtds-w-full lg:rtds-absolute lg:rtds-shadow-md lg:rtds-p-8" id="submenumenu-01">
                        <ul class="rtds-dropdown-menu__list lg:rtds-container">

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                            <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg" href="">
                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                        <span class="rtds-grow">List item</span>

                                    </div>

                                </a>
                            </li>

                        </ul>
                    </div>

                </li>

            </ul>
        </div>

    </div>
    <div class="rtds-primary-navigation__backdrop rtds-bg-black/25 rtds-top-[--header-height] lg:rtds-hidden"></div>
</nav>


        {% extends '@primary-navigation' %}

{% block classes %}
  {{ super() }} rtds-primary-navigation--megamenu has-megamenu
{% endblock classes %}

{% block dropdown %}
  {% render '@dropdown-menu--megamenu', { listItem: true, label: firstLevel.label,id: 'submenumenu-01', classes: 'rtds-primary-navigation__item', listPosition: dropdownListPosition, listClasses: itemClasses, listWidth: dropdownListWidth, triggerTextColor: itemTriggerTextColor, triggerFontSize:itemFontSize, listItemLinkFontSize: itemDropdownFontSize, items: dropdownItems, triggerClasses: itemTriggerClasses }, true %}
{% endblock dropdown %}


        
            
            {
  "navId": "mainNavPanel",
  "itemTriggerClasses": "rtds-primary-navigation__first-level rtds-primary-navigation__link",
  "itemFontSize": "rtds-text-base xl:rtds-text-lg",
  "itemDropdownFontSize": "rtds-text-base xl:rtds-text-lg",
  "firstLevels": [
    {
      "label": "Temi e servizi"
    },
    {
      "label": "Bandi e opportunità"
    },
    {
      "label": "Regione"
    },
    {
      "label": "Dropdown item",
      "hasSubItems": true
    }
  ],
  "dropdownItems": [
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    },
    {
      "label": "List item"
    }
  ]
}

File:

Content:


                                /**
 * PRIMARY NAVIGATION
 *
*/
@layer components {
    .rtds-primary-navigation {
        @apply rtds-flex;
    }

    .rtds-primary-navigation__item {
        @apply lg:rtds-flex lg:rtds-items-center;
    }

    .rtds-primary-navigation__item:where(.has-dropdown-menu) {
        @apply lg:rtds-relative;
    }

    .rtds-primary-navigation__first-level {
        @apply rtds-font-bold;
    }

    .rtds-primary-navigation__panel {
        @apply rtds-flex-col rtds-bg-white rtds-transition-all rtds-invisible rtds-w-[88%] lg:rtds-bg-transparent lg:rtds-w-auto rtds-fixed lg:rtds-static lg:rtds-visible rtds-top-[--header-height] rtds-bottom-0 rtds-left-[12%] lg:rtds-left-0 rtds-border-l rtds-border-primary lg:rtds-border-l-0 rtds-overflow-y-auto lg:rtds-overflow-visible rtds-translate-x-full lg:rtds-transform-none;
    }
        
    .rtds-primary-navigation__panel.is-open {
        @apply rtds-bg-white rtds-translate-x-0 rtds-visible rtds-flex rtds-z-20 rtds-left-[12%];
    }

    body.rtds-overflow-hidden .rtds-primary-navigation__backdrop,
    :root.rtds-overflow-hidden .rtds-primary-navigation__backdrop {
        @apply rtds-fixed rtds-right-0 rtds-bottom-0 rtds-left-0 lg:rtds-hidden rtds-z-10;
    }

    .rtds-primary-navigation__list {
        @apply rtds-grid lg:rtds-flex lg:rtds-justify-end rtds-gap-2 lg:rtds-gap-4 xl:rtds-gap-8;
    }

    .rtds-primary-navigation__link.is-current,
    .rtds-primary-navigation__link:hover {
        @apply rtds-content-primary rtds-relative after:rtds-absolute after:rtds-block after:rtds-bg-transparent after:rtds-border-t-2 after:rtds-border-current after:rtds-h-[1px] after:rtds-w-full after:rtds-left-0 after:rtds-bottom-0;
    }

    .rtds-primary-navigation__link {
        @apply rtds-min-h-14 rtds-w-full lg:rtds-h-full rtds-flex rtds-items-center lg:rtds-justify-center lg:rtds-text-center rtds-leading-tight rtds-p-3 rtds-gap-2 hover:rtds-no-underline hover:rtds-content-primary;
    }

    /* MOBILE MENU */
    .rtds-primary-navigation__module {
        @apply rtds-p-2 lg:rtds-p-0 rtds-grid rtds-items-start lg:rtds-block lg:rtds-flex-1 rtds-border-b rtds-border-gray-01 last:rtds-border-b-0;
    }

    /* MEGAMENU  container fix */
    .rtds-primary-navigation .rtds-dropdown-menu__megamenu.is-open {
        @apply lg:rtds-flex lg:rtds-justify-center;
    }

    .rtds-primary-navigation .rtds-dropdown-menu__list {
        @apply lg:rtds-flex-1;
    }

}

URL: /components/raw/primary-navigation/primary-navigation.css
Filesystem Path: components/03-molecules/primary-navigation/primary-navigation.css
Size: 2.4 KB

Handle: @primary-navigation--megamenu
Variants (2): Default , Megamenu
Preview:
- With layout
- Component only
Filesystem Path: components/03-molecules/primary-navigation/primary-navigation--megamenu.njk
References (2): @primary-navigation, @dropdown-menu--megamenu
Referenced by (1): @main-heading--has-megamenu

Il componente Primary Navigation è un elemento molecolare che gestisce la navigazione principale di un sito web. Include funzionalità di dropdown e supporta una versione mobile responsive.

Varianti

primary-navigation--megamenu: versione con menu a tendina espanso (megamenu)

Markup

Il componente utilizza una struttura semantica con:

<nav> come contenitore principale con ruolo di navigazione
<ul> per la lista degli elementi di navigazione
<li> per ogni elemento della lista
<a> per i link di navigazione
<button> per il toggle del menu mobile

La struttura base del markup è:

<nav class="rtds-primary-navigation" aria-label="Principale" id="siteNavWrapper">
  <!-- Toggle mobile -->
  <button type="button" class="rtds-btn rtds-btn--only-text" aria-expanded="false" aria-controls="mainNavPanel">
    <!-- Icone toggle -->
  </button>
  <!-- Pannello mobile -->
  <div class="rtds-primary-navigation__panel" id="mainNavPanel">
    <!-- Lista navigazione -->
    <ul class="rtds-primary-navigation__list">
      <!-- Elementi di navigazione -->
    </ul>
  </div>
</nav>

Comportamento

Supporta la navigazione responsive con toggle per dispositivi mobili
Include funzionalità di dropdown per sottomenu
Fornisce navigazione accessibile con attributi ARIA
Supporta la ricerca mobile integrata
Gestisce lo stile degli elementi attivi e inattivi
Include un backdrop per il menu mobile

Accessibilità

Il componente è stato progettato seguendo le linee guida WCAG 2.1 e implementa diverse caratteristiche per garantire l’accessibilità:

Struttura Semantica

Utilizzo di elementi HTML5 semantici (<nav>, <ul>, <li>, <a>)
Attributo aria-label="Principale" per identificare la navigazione principale
Attributo role="navigation" implicito nell’elemento <nav>

Toggle button con attributi ARIA:
- aria-expanded: indica lo stato del menu (aperto/chiuso)
- aria-controls: collega il button al pannello controllato
- aria-label implicito nel testo del button
Testo nascosto per screen reader (rtds-sr-only) per le icone del toggle
Gestione dello stato corrente con aria-current="page"

Supporto per navigazione da tastiera (tab, frecce)
Gestione dello stato aria-expanded per i menu a tendina
Focus management per la navigazione da tastiera

Ricerca Mobile

Form con role="search" per identificare la funzione di ricerca
Input con label associata e placeholder descrittivo
Button di ricerca con testo nascosto per screen reader

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

classes: stringa - classi CSS aggiuntive per il componente
navPanelClasses: stringa - classi per il pannello di navigazione mobile
listHorizontalAlignment: stringa - allineamento orizzontale della lista (default: lg:justify-end)
listGap: stringa - spaziatura tra gli elementi della lista
itemClasses: stringa - classi CSS per gli elementi della lista
itemFontSize: stringa - dimensione del font per gli elementi principali
itemDropdownFontSize: stringa - dimensione del font per gli elementi del dropdown
hasSearchPanel: booleano - mostra il pannello di ricerca mobile
firstLevels: array di oggetti - elementi di primo livello
- label: stringa - etichetta dell’elemento
- hasSubItems: booleano - indica se l’elemento ha sottomenu
- isCurrent: booleano - indica se l’elemento è la pagina corrente

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

context: oggetto - configurazione di default
- navId: stringa - ID del pannello di navigazione
- itemTriggerClasses: stringa - classi per il trigger del dropdown
- itemFontSize: stringa - dimensione del font per gli elementi principali
- itemDropdownFontSize: stringa - dimensione del font per gli elementi del dropdown
- firstLevels: array - elementi di primo livello
- dropdownItems: array - elementi del dropdown
variants: array - varianti del componente
- name: stringa - nome della variante
- context: oggetto - configurazione specifica della variante
  - dropdownListWidth: stringa - larghezza del dropdown
  - itemClasses: stringa - classi per gli elementi
  - firstLevels: array - elementi di primo livello
  - dropdownItems: array - elementi del dropdown

Blocchi

classes: blocco per l’inserimento di classi CSS aggiuntive
dropdown: blocco per il rendering del componente dropdown

Primary Navigation: Megamenu

Primary Navigation Component

Varianti

Markup

Comportamento

Accessibilità

Struttura Semantica

Menu Mobile

Ricerca Mobile

Configurazioni per lo sviluppo (Nunjucks)

Configurazione YAML

Blocchi

Primary Navigation: Megamenu

Primary Navigation Component

Varianti

Markup

Comportamento

Accessibilità

Struttura Semantica

Menu Mobile

Dropdown e Megamenu

Ricerca Mobile

Configurazioni per lo sviluppo (Nunjucks)

Configurazione YAML

Blocchi