Context Menu: 4 Cols

WIP

HTML
View
Context
Assets
Info
Notes


        
        <section class="rtds-context-menu">
    <div class="rtds-context-menu__container rtds-container">
        <div class="rtds-context-menu__header rtds-flex-2 md:rtds-flex-none">
            <div class="rtds-site-logo rtds-max-w-16 md:rtds-max-w-20 lg:rtds-max-w-24">
                <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/icona-tema-sociale.svg" alt="Alt logo image" width="118" height="24" />
            </div>

            <div class="rtds-flex rtds-items-baseline rtds-gap-2">
                <span class="rtds-context-menu__title rtds-text-sm md:rtds-text-base xl:rtds-text-lg rtds-leading-none rtds-grid rtds-gap-1 md:rtds-block" id="contextMenuTitle">

                    <a class="rtds-font-bold hover:rtds-underline" href=""><span class="rtds-sr-only">Homepage del tema: </span>Beni, Servizi e Lavori pubblici</a>

                </span>

            </div>
        </div>

        <nav class="rtds-context-menu__nav rtds-dropdown-menu has-dropdown-menu rtds-flex-1" aria-labelledby="contextMenuTitle">

            <ul class="rtds-context-menu__nav-list rtds-flex rtds-flex-wrap rtds-gap-1 xs:rtds-gap-2 lg:rtds-gap-4 rtds-flex-1 rtds-justify-between lg:rtds-justify-end">
                <li>
                    <button id="contextMenuTrigger" class="rtds-context-menu__trigger rtds-dropdown-trigger rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2 rtds-ml-auto md:rtds-ml-0" aria-expanded="false" aria-controls="contextMenu01">
                        <span class="rtds-text-xs md:rtds-sr-only">Argomenti</span>
                        <span class="rtds-sr-only md:rtds-not-sr-only">
                            <span class="rtds-context-menu__toggle-text">
                                Tutti gli argomenti
                            </span>

                        </span>
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-down" />
                        </svg>

                    </button>

                    <div class="rtds-context-menu__list-container" id="contextMenu01">

                        <ul class="rtds-context-menu__list rtds-grid rtds-gap-4 rtds-p-4 lg:rtds-flex-1 lg:rtds-container md:rtds-grid-cols-2 lg:rtds-grid-cols-4">

                            <li class="rtds-context-menu__item rtds-menu-card rtds-group/item">
                                <a href="#" class="rtds-context-menu__link rtds-menu-card__link">

                                    <span class="rtds-menu-card__title rtds-heading-3 group-hover/item:rtds-underline">Terza età</span>
                                    <span class="rtds-menu-card__text">Le politiche della Regione per le persone anziane.</span>

                                </a>
                            </li>

                            <li class="rtds-context-menu__item rtds-menu-card rtds-group/item">
                                <a href="#" class="rtds-context-menu__link rtds-menu-card__link is-active">

                                    <span class="rtds-menu-card__title rtds-heading-3 group-hover/item:rtds-underline">Carcere</span>
                                    <span class="rtds-menu-card__text">I progetti di supporto ai percorsi di riabilitazione.</span>

                                </a>
                            </li>

                            <li class="rtds-context-menu__item rtds-menu-card rtds-group/item">
                                <a href="#" class="rtds-context-menu__link rtds-menu-card__link is-active">

                                    <span class="rtds-menu-card__title rtds-heading-3 group-hover/item:rtds-underline">Carcere</span>
                                    <span class="rtds-menu-card__text">I progetti di supporto ai percorsi di riabilitazione.</span>

                                </a>
                            </li>

                            <li class="rtds-context-menu__item rtds-menu-card rtds-group/item">
                                <a href="#" class="rtds-context-menu__link rtds-menu-card__link is-active">

                                    <span class="rtds-menu-card__title rtds-heading-3 group-hover/item:rtds-underline">Carcere</span>
                                    <span class="rtds-menu-card__text">I progetti di supporto ai percorsi di riabilitazione.</span>

                                </a>
                            </li>

                            <li class="rtds-context-menu__item rtds-context-menu__item--more">
                                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--outlined rtds-btn--s rtds-context-menu__link rtds-context-menu__link--more">

                                    Scopri gli approfondimenti del tema

                                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-right" />
                                    </svg>

                                </a>

                            </li>
                        </ul>

                    </div>
                </li>
                <li>
                    <a href="#" class="rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2">
                        <span class="rtds-text-xs md:rtds-text-sm">Approfondimenti</span>
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </a>
                </li>
                <li>
                    <a href="#" class="rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2">
                        <span class="rtds-text-xs md:rtds-text-sm">Servizi</span>
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </a>
                </li>

            </ul>
        </nav>

    </div>
</section>


        {# Context Menu Component #}
<section class="rtds-context-menu">
    <div class="rtds-context-menu__container rtds-container">
        <div class="rtds-context-menu__header rtds-flex-2 md:rtds-flex-none">
            {% render '@logo', logo, true %}
            <div class="rtds-flex rtds-items-baseline rtds-gap-2">
                <span class="rtds-context-menu__title rtds-text-sm md:rtds-text-base xl:rtds-text-lg rtds-leading-none rtds-grid rtds-gap-1 md:rtds-block" id="contextMenuTitle">
                   {{ titlePrefix|safe }}
                     <a class="rtds-font-bold hover:rtds-underline" href=""><span class="rtds-sr-only">Homepage del tema: </span>{{ title|safe }}</a>
                    {{ titleSuffix|safe }}
                </span>
                {% if description %}
                    <span class="rtds-context-menu__description rtds-hidden lg:rtds-block rtds-text-base xl:rtds-text-lg">
                    {{ description|safe }}
                    </span>
                {% endif %}
            </div> 
        </div>
        {% block contextMenu %}
        <nav class="rtds-context-menu__nav rtds-dropdown-menu has-dropdown-menu rtds-flex-1" aria-labelledby="contextMenuTitle">
            
            <ul class="rtds-context-menu__nav-list rtds-flex rtds-flex-wrap rtds-gap-1 xs:rtds-gap-2 lg:rtds-gap-4 rtds-flex-1 rtds-justify-between lg:rtds-justify-end">
                <li>
                    <button id="contextMenuTrigger" class="rtds-context-menu__trigger rtds-dropdown-trigger rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2 rtds-ml-auto md:rtds-ml-0" aria-expanded="false" aria-controls="contextMenu01">
                        <span class="rtds-text-xs md:rtds-sr-only">Argomenti</span>
                        <span class="rtds-sr-only md:rtds-not-sr-only">
                            <span class="rtds-context-menu__toggle-text">
                                Tutti gli argomenti
                            </span>

                            {# <span class="rtds-context-menu__toggle-text is-show-more">
                                Vedi tutti gli argomenti
                            </span>
                            <span class="rtds-context-menu__toggle-text is-show-less">
                                Vedi meno argomenti
                            </span>#}
                        </span>
                        {% render '@icon',{id: 'mini--chevron-down',size:'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5'} ,true %}
                    </button>

                    <div class="rtds-context-menu__list-container" id="contextMenu01">
                        {% if items %}
                        <ul class="rtds-context-menu__list rtds-grid rtds-gap-4 rtds-p-4 lg:rtds-flex-1 lg:rtds-container {{ menuListGridClasses }}">
                            {% for item in items %}
                            <li class="rtds-context-menu__item rtds-menu-card rtds-group/item">
                                <a href="{{ item.url }}" class="rtds-context-menu__link rtds-menu-card__link{% if item.isActive %} is-active{% endif %}">
                    
                                <span class="rtds-menu-card__title rtds-heading-3 group-hover/item:rtds-underline">{{ item.title }}</span>
                                <span class="rtds-menu-card__text">{{ item.text }}</span>

                                </a>
                            </li>
                            {% endfor %}
                            <li class="rtds-context-menu__item rtds-context-menu__item--more">
                                {% render '@button--icon-right',{
                                    classes: 'rtds-btn--outlined rtds-btn--s rtds-context-menu__link rtds-context-menu__link--more',
                                    href: '#',
                                    label: 'Scopri gli approfondimenti del tema',
                                    icon: 'mini--chevron-right'
                                }, true %}
                            </li>
                        </ul>
                    {% endif %}

                </div>
            </li>
            <li>
                <a href="#" class="rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2">
                     <span class="rtds-text-xs md:rtds-text-sm">Approfondimenti</span>
                    {% render '@icon',{id: 'mini--chevron-right',size:'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5'} ,true %}
                </a>
            </li>
            <li>
                <a href="#" class="rtds-btn rtds-btn--only-text rtds-btn--s rtds-btn--icon-right rtds-pr-1.5 rtds-pl-2">
                     <span class="rtds-text-xs md:rtds-text-sm">Servizi</span>
                    {% render '@icon',{id: 'mini--chevron-right',size:'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5'} ,true %}
                </a>
            </li>

            </ul>
        </nav>
        {% endblock contextMenu %}
  </div>    
</section>


        
            
            {
  "title": "Beni, Servizi e Lavori pubblici",
  "menuListGridClasses": "md:rtds-grid-cols-2 lg:rtds-grid-cols-4",
  "logo": {
    "path": "/images/icona-tema-sociale.svg",
    "width": "118",
    "height": "24",
    "classes": "rtds-max-w-16 md:rtds-max-w-20 lg:rtds-max-w-24"
  },
  "items": [
    {
      "title": "Terza età",
      "text": "Le politiche della Regione per le persone anziane.",
      "url": "#"
    },
    {
      "title": "Carcere",
      "text": "I progetti di supporto ai percorsi di riabilitazione.",
      "url": "#",
      "isActive": true
    },
    {
      "title": "Carcere",
      "text": "I progetti di supporto ai percorsi di riabilitazione.",
      "url": "#",
      "isActive": true
    },
    {
      "title": "Carcere",
      "text": "I progetti di supporto ai percorsi di riabilitazione.",
      "url": "#",
      "isActive": true
    }
  ]
}

File:

Content:


                                @layer components {
    /* base style */
    .rtds-context-menu {
        @apply rtds-border-b-2 rtds-border-gray-02 rtds-relative;
    }

    .rtds-context-menu__container {
        @apply rtds-grid lg:rtds-flex rtds-pt-4 rtds-pb-2 md:rtds-pb-2.5 lg:rtds-py-3 rtds-gap-4 rtds-items-center;
    }

    .rtds-context-menu__header {
        @apply rtds-flex rtds-items-center rtds-gap-2 rtds-content-02;
    }

    .rtds-context-menu__nav {
        @apply rtds-flex;
    }

    .rtds-context-menu__list-container {
        @apply rtds-absolute rtds-top-full rtds-left-0 rtds-w-full rtds-bg-white rtds-z-50 rtds-py-4 rtds-border-b-2 rtds-border-t-2 rtds-border-gray-02;
    }

    .rtds-context-menu__list-container.is-open {
        @apply rtds-flex rtds-justify-center;
    }


    /* interactivity */
    :where(.rtds-context-menu__toggle-text.is-show-less) {
        @apply rtds-hidden;
    }

    :where(.has-dropdown-open .rtds-context-menu__toggle-text.is-show-more) {
        @apply rtds-hidden;
    }

    :where(.has-dropdown-open .rtds-context-menu__toggle-text.is-show-less) {
        @apply rtds-block;
    }

    .rtds-context-menu__trigger .rtds-icon {
        @apply rtds-transition-all;
    }

    .rtds-context-menu__trigger:where([aria-expanded="true"]) .rtds-icon {
        @apply -rtds-rotate-180;
    }

    /* RTDS-MENU-CARD */
    .rtds-menu-card {
        @apply rtds-bg-white rtds-p-6 rtds-bg-gradient-04;
    }

    .rtds-menu-card__link {
        @apply rtds-flex rtds-flex-col rtds-gap-2;
    }

    .rtds-menu-card__title {
        @apply rtds-content-02;
    }

    .rtds-menu-card__text {
        @apply rtds-text-sm rtds-content-01;
    }

    .rtds-context-menu__item--more {
        @apply rtds-col-span-full rtds-flex rtds-justify-center rtds-items-center;
    }


}

URL: /components/raw/context-menu/context-menu.css
Filesystem Path: components/04-organisms/context-menu/context-menu.css
Size: 1.8 KB

Handle: @context-menu--4-cols
Variants (6): Default , 2 Cols , 3 Cols , 4 Cols , Backlink Only , Has Description
Preview:
- With layout
- Component only
Filesystem Path: components/04-organisms/context-menu/context-menu.njk
References (3): @logo, @icon, @button--icon-right

Il componente Context Menu è un organismo che implementa un menu di navigazione contestuale con dropdown per la visualizzazione di argomenti correlati.

Comportamento

Il componente offre le seguenti funzionalità:

Menu Dropdown: Un pulsante che permette di espandere/collassare una lista di argomenti correlati
Navigazione Contestuale: Link rapidi per approfondimenti e servizi correlati
Responsive: Layout adattivo che si modifica in base alla dimensione dello schermo
Stato Attivo: Supporto per la visualizzazione dell’argomento attualmente selezionato

Accessibilità

Il componente è completamente accessibile tramite tastiera
Utilizza attributi ARIA appropriati per la gestione del dropdown
Include testo nascosto per screen reader
Mantiene il focus all’interno del menu quando è aperto

Struttura

Il componente è strutturato in tre sezioni principali:

Header con logo e titolo
Menu di navigazione con dropdown per gli argomenti
Link rapidi per approfondimenti e servizi

Configurazioni - sviluppo in NJK

Il componente può essere configurato attraverso il file context-menu.config.yml. Ecco una spiegazione dettagliata dei parametri disponibili:

Parametri Principali

`title`

Tipo: Stringa
Descrizione: Titolo principale del menu contestuale
Utilizzo: Viene visualizzato come link principale nell’header

Esempio:

title: "Beni, Servizi e Lavori pubblici"

`titlePrefix` e `titleSuffix`

Tipo: Stringa (HTML)
Descrizione: Testo opzionale da visualizzare prima e dopo il titolo principale
Utilizzo: Permette di aggiungere contesto o formattazione al titolo

Esempio:

titlePrefix: "<span class='rtds-text-sm'>Area:</span>"
titleSuffix: "<span class='rtds-text-xs'>Ultimo aggiornamento: 2024</span>"

`description`

Tipo: Stringa (HTML)
Descrizione: Descrizione opzionale del menu contestuale
Utilizzo: Visibile su schermi grandi (lg e superiori)

Esempio:

description: "Esplora le tematiche relative ai beni, servizi e lavori pubblici"

`menuListGridClasses`

Tipo: Stringa
Descrizione: Classi CSS per il layout a griglia del menu
Utilizzo: Controlla il numero di colonne su diversi breakpoint

Esempio:

menuListGridClasses: "md:rtds-grid-cols-2 lg:rtds-grid-cols-4 xl:rtds-grid-cols-5"

`logo`

Tipo: Oggetto
Descrizione: Configurazione del logo
Proprietà:
- path: Percorso dell’immagine
- width: Larghezza del logo
- height: Altezza del logo
- classes: Classi CSS per il dimensionamento responsive

Esempio:

logo:
  path: '/images/icona-tema-sociale.svg'
  width: '118'
  height: '24'
  classes: 'rtds-max-w-16 md:rtds-max-w-20 lg:rtds-max-w-24'

`items`

Tipo: Array di oggetti
Descrizione: Lista degli argomenti nel menu dropdown
Proprietà per ogni item:
- title: Titolo dell’argomento (obbligatorio)
- text: Descrizione breve (obbligatorio)
- url: Link di destinazione (obbligatorio)
- isActive: Stato attivo (opzionale, booleano)

Esempio:

items:
  - title: "Terza età"
    text: "Le politiche della Regione per le persone anziane."
    url: "#"
  - title: "Carcere"
    text: "I progetti di supporto ai percorsi di riabilitazione."
    url: "#"
    isActive: true

Varianti

Il componente supporta diverse varianti predefinite, ognuna ottimizzata per un numero specifico di elementi:

default
- Layout standard con 5 colonne su schermi extra-large
- Utilizza le classi grid: md:rtds-grid-cols-2 lg:rtds-grid-cols-4 xl:rtds-grid-cols-5
- Ideale per menu con 5 o più elementi
2-cols
- Layout a 2 colonne su desktop
- Utilizza le classi grid: md:rtds-grid-cols-2
- Ottimale per menu con 2 o meno elementi
3-cols
- Layout a 3 colonne su desktop
- Utilizza le classi grid: md:rtds-grid-cols-2 lg:rtds-grid-cols-3
- Ideale per menu con esattamente 3 elementi
4-cols
- Layout a 4 colonne su desktop
- Utilizza le classi grid: md:rtds-grid-cols-2 lg:rtds-grid-cols-4
- Ottimale per menu con 4 elementi
backlink-only
- Versione semplificata con solo link di ritorno
- Rimuove il dropdown e i link rapidi
- Ideale per la navigazione di ritorno
has-description
- Versione con descrizione aggiuntiva
- Include un separatore e una descrizione testuale
- Utile per contestualizzare meglio il menu

Classi CSS

rtds-context-menu: Contenitore principale del componente
rtds-context-menu__container: Contenitore del contenuto
rtds-context-menu__header: Sezione header con logo e titolo
rtds-context-menu__title: Titolo del menu
rtds-context-menu__description: Descrizione opzionale
rtds-context-menu__nav: Menu di navigazione
rtds-context-menu__nav-list: Lista degli elementi di navigazione
rtds-context-menu__trigger: Pulsante per il dropdown
rtds-context-menu__list-container: Contenitore del menu dropdown
rtds-context-menu__list: Lista degli argomenti nel dropdown
rtds-context-menu__item: Singolo elemento del menu
rtds-context-menu__link: Link dell’elemento del menu
rtds-context-menu__item--more: Elemento “mostra di più”

Context Menu: 4 Cols

Context Menu

Comportamento

Accessibilità

Struttura

Configurazioni - sviluppo in NJK

Parametri Principali

title

titlePrefix e titleSuffix

description

menuListGridClasses

logo

items

Varianti

Classi CSS

`title`

`titlePrefix` e `titleSuffix`

`description`

`menuListGridClasses`

`logo`

`items`