Regione Toscana Design System — Servizi Design System Core

Header Top bar component: With Nav 

<div class="rtds-top-bar rtds-py-1 md:rtds-py-2 rtds-px-4">
    <div class="rtds-top-bar__container rtds-container">

        <nav class="rtds-primary-navigation rtds-flex lg:rtds-justify-end rtds-ml-auto lg:rtds-ml-0 is-top-nav-positioned" 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" aria-haspopup="dialog" 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 rtds-flex-col rtds-transition-all rtds-invisible rtds-w-[88%] 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" id="mainNavPanel" role="dialog" aria-modal="true" aria-label="Menu di navigazione">
                <!-- Main nav -->
                <div class="rtds-primary-navigation__module is-main lg:rtds-border-b-0">
                    <ul class="rtds-primary-navigation__list  rtds-gap-2 lg:rtds-gap-2.5">

                        <li class="rtds-primary-navigation__item">
                            <a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-sm">
                                Item
                            </a>
                        </li>

                        <li class="rtds-primary-navigation__item">
                            <a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-sm is-current" aria-current="page">
                                Current page
                            </a>
                        </li>

                        <li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item">
                            <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  hover:rtds-content-primary aria-expanded:rtds-bg-white lg:aria-expanded:rtds-bg-transparent aria-expanded:rtds-content-primary aria-expanded:rtds-relative rtds-p-3 rtds-gap-2 rtds-text-sm rtds-primary-navigation__first-level rtds-primary-navigation__link" aria-expanded="false" aria-controls="submenumenu-3">

                                Dropdown

                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 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>

                            <ul class="rtds-dropdown-menu__list rtds-hidden rtds-border rtds-border-t-0 lg:rtds-w-52 lg:rtds-border-t lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute rtds-border-r-0 rtds-border-l-0 lg:rtds-border-r lg:rtds-border-l" id="submenumenu-3">

                                <li class="rtds-dropdown-menu__item rtds-group/menu-item">
                                    <a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-sm group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" 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-sm group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" 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-sm group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" 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-sm group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
                                        <div class="rtds-flex rtds-gap-2 rtds-items-center">

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

                                        </div>

                                    </a>
                                </li>

                            </ul>

                        </li>

                    </ul>
                </div>

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

        <div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 xl:rtds-gap-6 rtds-ml-auto">

            <!-- Social links component -->

            <div class="rtds-social-links rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 ">

                <ul id="headerSocial" class="rtds-flex rtds-items-center rtds-gap-4 lg:rtds-gap-2 xl:rtds-gap-4 rtds-flex-wrap rtds-p-2 lg:rtds-p-0">

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al profilo Facebook di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--facebook" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al profilo X di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--x" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al canale Telegram di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--telegram" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al canale Youtube di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--youtube" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al canale Instagram di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--instagram" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
                            <span class="rtds-sr-only">Vai al profilo Flickr di Regione Toscana</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--flickr" />
                            </svg>

                        </a>
                    </li>

                </ul>

            </div>

            <div class="rtds-vertical-divider rtds-w-1e rtds-flex">
                <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
            </div>

            <!-- Search Modal Desktop -->

            <!-- Desktop Search Modal -->
            <div class="rtds-search-modal-desktop__wrapper rtds-hidden lg:rtds-block">
                <button type="button" aria-haspopup="dialog" aria-controls="searchModal" aria-expanded="false" id="searchModalTrigger" class="rtds-btn rtds-btn--outline rtds-btn--icon rtds-w-6 rtds-h-6 md:rtds-w-10 md:rtds-h-10 rtds-border-gray-03 hover:rtds-button-primary-hover focus:rtds-button-primary-hover active:rtds-button-primary-hover hover:rtds-text-white focus:rtds-text-white active:rtds-text-white">
                    <span class="rtds-sr-only">Cerca nel sito - apri la modale</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--magnifying-glass" />
                    </svg>

                </button>

                <!-- Search Modal -->
                <div id="searchModal" class="rtds-search-modal-desktop rtds-fixed rtds-items-center rtds-content-center rtds-inset-0 rtds-bg-black rtds-bg-opacity-50 rtds-overflow-y-auto rtds-h-full rtds-w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle" data-trigger-id="searchModalTrigger" data-close-button-id="closeModal">

                    <div class="rtds-relative rtds-h-full lg:rtds-h-full lg:rtds-w-full rtds-mx-auto rtds-p-6 lg:rtds-p-16 rtds-shadow-lg rtds-bg-white">
                        <div class="rtds-modal-content rtds-container rtds-px-16 rtds-grid rtds-gap-14">
                            <div class="rtds-flex rtds-justify-between rtds-items-center">
                                <h2 id="modalTitle" class="rtds-text-3xl md:rtds-text-5xl lg:rtds-text-6xl">Cerca nel sito</h2>
                                <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--icon rtds-border-0 hover:rtds-background-primary hover:rtds-text-white" id="closeModal"><svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--x-mark" />
                                    </svg>
                                    <span class="rtds-sr-only">

                                        Chiudi
                                    </span>

                                </button>

                            </div>

                            <form role="search" class="rtds-flex rtds-gap-2">
                                <div class="rtds-input-field rtds-gap-1 rtds-flex-1 rtds-search-modal-desktop__input ">
                                    <label for="inputSearch" class="rtds-input-field__label">
                                        Cerca servizi, informazioni, aiuti...

                                    </label>

                                    <div class="rtds-input has-icon">

                                        <svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--magnifying-glass" />
                                        </svg>

                                        <input id="inputSearch" class="rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
                                    </div>

                                </div>
                                <button type="button" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--primary rtds-self-end">

                                    Cerca nel sito

                                    <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>

                                </button>

                            </form>

                        </div><!-- /END MODAL CONTENT -->
                    </div>
                </div>
            </div>

        </div>
        <!--/ END TOP BAR UTILITIES -->

    </div>
</div><!-- /END TOPBAR -->
 
{% extends '@top-bar' %}
{% block leftArea %}
    {% render '@primary-navigation', {classes: 'rtds-flex lg:rtds-justify-end rtds-ml-auto lg:rtds-ml-0 is-top-nav-positioned', navPanelClasses: 'rtds-flex-col rtds-transition-all rtds-invisible rtds-w-[88%] 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', listGap: 'rtds-gap-2 lg:rtds-gap-2.5',itemFontSize: 'rtds-text-sm', itemDropdownFontSize: 'rtds-text-sm'}, true %}
{% endblock %}
 
{
  "hasSecondaryNav": true,
  "hasTopBarSocial": true,
  "hasSearchButton": true,
  "mobileHidden": false,
  "spacing": "rtds-py-1 md:rtds-py-2 rtds-px-4",
  "hasVerticalDivider": true,
  "searchButtonBorderColor": "rtds-border-gray-03",
  "searchModalVariant": null,
  "hasLanguageSelector": false
}
  • Content: 
    /**
 * SIDE NAVIGATION
 *
*/
.rtds-top-bar {
        background-color: var(--color-background-01);
    display: flex;
    align-items: center;
}
.rtds-top-bar__container {
    display: flex;
    align-items: center;
}
@media (min-width: 1024px) {
    .rtds-top-bar__container {
        flex: 1 1 0%;
    }
}
/*.rtds-top-bar__navigation {
    }*/
/*.rtds-top-bar__utilities-area {
        @apply rtds-flex rtds-ml-auto;
    }*/
  • URL: /components/raw/top-bar/top-bar.built.css
  • Filesystem Path: components/04-organisms/top-bar/top-bar.built.css
  • Size: 427 Bytes
  • Content: 
    /**
 * SIDE NAVIGATION
 *
*/
@layer components {
    .rtds-top-bar {
        @apply rtds-flex rtds-items-center rtds-background-01;
    }

    .rtds-top-bar__container {
        @apply rtds-flex rtds-items-center lg:rtds-flex-1;
    }

    /*.rtds-top-bar__navigation {
    }*/

    /*.rtds-top-bar__utilities-area {
        @apply rtds-flex rtds-ml-auto;
    }*/
}
  • URL: /components/raw/top-bar/top-bar.css
  • Filesystem Path: components/04-organisms/top-bar/top-bar.css
  • Size: 365 Bytes

Top Bar

Barra superiore del sito — contiene navigazione secondaria, social link, link con logo, selezione lingua, user dropdown e pulsante di ricerca. Non è un landmark autonomo: viene incluso all’interno del componente @header.

Comportamento

Il componente viene renderizzato come <div class="rtds-top-bar">, non come elemento semantico <header> — il landmark è gestito dal componente padre @header.

La visibilità su mobile è controllata dal parametro mobileHidden: se true, aggiunge rtds-hidden lg:rtds-flex per nascondere la top bar sugli schermi piccoli.

Il template espone blocchi Nunjucks (leftArea, TopBarLinkLeft, secondaryNav, rightArea, TopBarLinkRight, userDropdown) per la personalizzazione nelle varianti.

La variante with-nav sostituisce il contenuto dell’area sinistra con un componente @primary-navigation tramite override del blocco leftArea.

Varianti

Varianti di configurazione

  • default: Top bar completa con navigazione secondaria, social link, divisore verticale e pulsante di ricerca (modale semplice)
  • with-nav: Area sinistra sostituita dalla navigazione primaria (@primary-navigation); visibile anche su mobile (mobileHidden: false)
  • has-image-link-left: Senza navigazione secondaria; area sinistra con uno o più loghi/immagini linkati
  • has-image-link-right: Area destra con uno o più loghi/immagini linkati
  • user-dropdown / Utente loggato: Area destra con componente @user-dropdown in stato loggato (mostra menu a tendina profilo)
  • utente-non-loggato: Area destra con componente @user-dropdown in stato non loggato (mostra pulsante “Login”)
  • with-search-bar-modal: Modale di ricerca desktop con componente @search-bar completo (autocomplete, pulsante clear, link “Tutti i risultati”)

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

  • classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento radice .rtds-top-bar
  • bgColor (stringa, opzionale): Classe Tailwind per il colore di sfondo (sovrascrive il default rtds-background-01)
  • spacing (stringa, opzionale): Classi Tailwind per il padding (es. rtds-py-1 md:rtds-py-2 rtds-px-4)
  • mobileHidden (booleano, opzionale): Se true, nasconde la top bar su mobile aggiungendo rtds-hidden lg:rtds-flex

Parametri Area Sinistra — Link con immagine

  • topBarLinkLeft (array, opzionale): Elenco di loghi/immagini linkati nell’area sinistra. Ogni elemento accetta:
    • alt (stringa): Testo alternativo dell’immagine
    • link (stringa): URL del link
    • image (stringa): Percorso dell’immagine
    • width (numero): Attributo width dell’immagine
    • height (numero): Attributo height dell’immagine
    • imageSrcset (stringa, opzionale): Attributo srcset per immagini retina

Parametri Area Destra — Link con immagine

  • topBarLinkRight (array, opzionale): Elenco di loghi/immagini linkati nell’area destra. Accetta le stesse proprietà di topBarLinkLeft

Parametri Componenti Integrati

  • hasSecondaryNav (booleano, opzionale): Se true, renderizza il componente @secondary-navigation nell’area sinistra
  • hasTopBarSocial (booleano, opzionale): Se true, renderizza il componente @social-links nell’area destra
  • hasUserDropdown (booleano, opzionale): Se true, renderizza il componente @user-dropdown nell’area destra
  • userDropdown (oggetto, opzionale): Contesto passato al componente @user-dropdown. Chiavi supportate:
    • isUserLoggedIn (booleano): Se true, mostra il menu a tendina del profilo; se false, mostra il pulsante “Login”
    • userDropdownId (stringa, opzionale): ID per l’elemento <ul> del menu a tendina (default: "userDropdown")
    • buttonClasses (stringa, opzionale): Classi CSS aggiuntive sul trigger button (default: "rtds-btn--only-text")
  • hasVerticalDivider (booleano, opzionale): Se true, renderizza il componente @vertical-divider tra i controlli dell’area destra
  • hasLanguageSelector (booleano, opzionale): Se true, mostra un segnaposto per il selettore di lingua

Parametri Ricerca

  • hasSearchButton (booleano, opzionale): Se true, mostra il pulsante/trigger per la modale di ricerca desktop
  • searchModalVariant (stringa, opzionale): Variante della modale di ricerca desktop:
    • null o non specificato: modale semplice con @input-field--search e @button--icon-right
    • "with-search-bar": modale con componente @search-bar completo (autocomplete, pulsante clear, dropdown risultati)
  • searchButtonBorderColor (stringa, opzionale): Classe CSS per il colore del bordo del trigger button (default: "rtds-border-gray-03")
  • searchButtonTextColor (stringa, opzionale): Classe CSS per il colore del testo del trigger button
  • searchId (stringa, opzionale): ID del campo di ricerca (default: "desktopSearchBar")
  • searchLabel (stringa, opzionale): Label del campo di ricerca (default: "Cerca")
  • searchSubmitLabel (stringa, opzionale): Testo del pulsante submit (default: "Cerca")
  • showClearButton (booleano, opzionale): Mostra il pulsante per cancellare il testo (default: true)
  • searchPlaceholder (stringa, opzionale): Placeholder del campo di ricerca (default: "Search")
  • searchFormAction (stringa, opzionale): Attributo action del form di ricerca (default: "/search")
  • searchFormMethod (stringa, opzionale): Attributo method del form di ricerca (default: "get")
  • allResultsHref (stringa, opzionale): URL del link “Tutti i risultati” nel dropdown (default: "/search?q=")
  • allResultsLabel (stringa, opzionale): Testo del link “Tutti i risultati” (default: "Tutti i risultati")

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — struttura con navigazione secondaria <nav> e social links con label descrittive
  • 4.1.2 Nome, Ruolo, Valore — il trigger della modale di ricerca usa aria-haspopup, aria-controls e aria-expanded
  • 2.4.1 Salto di blocchi — la top bar è inclusa nel landmark <header> tramite il componente @header

Struttura e semantica

  • <div class="rtds-top-bar"> — non è un landmark autonomo; è parte del <header> del componente padre
  • La navigazione secondaria è delegata al componente @secondary-navigation con il proprio <nav aria-label="..."> interno
  • I social link sono delegati al componente @social-links con label descrittive per ogni link
  • I link con immagine nell’area sinistra/destra sono renderizzati come <a href="..."><img alt="..."></a> — il testo alternativo dell’immagine fornisce il nome accessibile del link

Attributi ARIA

Attributo Valori Condizione
aria-haspopup "dialog" sul trigger ricerca, quando hasSearchButton è abilitato
aria-controls "searchModal" sul trigger ricerca, quando hasSearchButton è abilitato
aria-expanded "false" / "true" sul trigger ricerca; gestito da JavaScript — valore iniziale false
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i controlli della top bar
Enter / Space Apre la modale di ricerca (sul trigger)
Escape Chiude la modale di ricerca (gestito da search-modal-desktop.js)

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Il trigger del pulsante di ricerca include aria-haspopup="dialog" (annuncia l’apertura di una finestra modale), aria-controls="searchModal" e aria-expanded aggiornato dinamicamente da JavaScript
  • I loghi nell’area sinistra/destra devono avere alt descrittivo (es. “Regione Toscana”, “Toscana Notizie”) per identificare la destinazione del link
  • La gestione dell’attributo aria-expanded sul trigger di ricerca è implementata in search-modal-desktop.js

Stili CSS

Classi Base

  • .rtds-top-bar: Elemento radice del componente; flex, items-center, sfondo rtds-background-01

Classi Elementi (BEM)

  • .rtds-top-bar__container: Contenitore interno con larghezza controllata da .rtds-container; flex, items-center, lg:flex-1
  • .rtds-top-bar__navigation: Area sinistra; grid su mobile, flex da lg; allinea logo e navigazione secondaria
  • .rtds-top-bar__utilities-area: Area destra; flex, ml-auto; contiene social, user dropdown, link destra, selettore lingua, ricerca

Esempi di utilizzo

<!-- Top bar base con navigazione secondaria e ricerca -->
<div class="rtds-top-bar rtds-py-1 md:rtds-py-2 rtds-px-4 rtds-hidden lg:rtds-flex">
    <div class="rtds-top-bar__container rtds-container">
        <div class="rtds-top-bar__navigation rtds-grid lg:rtds-flex rtds-items-center rtds-gap-2 lg:rtds-gap-8">
            <!-- @secondary-navigation -->
        </div>
        <div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 rtds-ml-auto">
            <!-- @social-links -->
            <!-- @search-modal-desktop -->
        </div>
    </div>
</div>

<!-- Top bar con loghi a sinistra -->
<div class="rtds-top-bar">
    <div class="rtds-top-bar__container rtds-container">
        <div class="rtds-top-bar__navigation rtds-grid lg:rtds-flex rtds-items-center">
            <div class="rtds-flex rtds-gap-4 rtds-items-center">
                <a href="#" class="rtds-link">
                    <img src="/images/regione-toscana-min.png" alt="Regione Toscana" width="34" height="34">
                </a>
                <a href="#" class="rtds-link">
                    <img src="/images/toscana-notizie.png" alt="Toscana Notizie" width="147" height="28"
                         srcset="/images/toscana-notizie.png 1x, /images/toscana-notizie@2x.png 2x">
                </a>
            </div>
        </div>
        <div class="rtds-top-bar__utilities-area rtds-flex rtds-ml-auto">
            <!-- @search-modal-desktop -->
        </div>
    </div>
</div>

Scenari d’uso

Utente loggato — top bar con menu profilo

Imposta hasUserDropdown: true e userDropdown.isUserLoggedIn: true. Il componente @user-dropdown renderizza il menu a tendina con le voci di navigazione del profilo. Abbina hasTopBarSocial: false per eliminare i social link quando è presente l’area utente.

Utente non loggato — top bar con pulsante accesso

Imposta hasUserDropdown: true e userDropdown.isUserLoggedIn: false. Il componente @user-dropdown renderizza un pulsante “Login” con icona. Abbina hasTopBarSocial: false per coerenza visiva con il caso loggato.

Top bar senza area utente

Imposta hasUserDropdown: false (o ometti il parametro). La top bar non renderizza nessuna area utente — utile per siti istituzionali senza autenticazione.

Note

  • Il componente non è un landmark autonomo: va sempre incluso all’interno di un elemento <header> (gestito dal componente @header)
  • La variante with-nav sovrascrive il blocco leftArea tramite Nunjucks {% extends '@top-bar' %} — non usa i parametri topBarLinkLeft o hasSecondaryNav
  • I blocchi Nunjucks disponibili per l’override sono: leftArea, TopBarLinkLeft, secondaryNav, rightArea, TopBarLinkRight, userDropdown
  • La variante with-search-bar-modal richiede il componente @search-modal-desktop--with-search-bar e i relativi script JavaScript per l’autocomplete
  • Limite noto della documentazione (non del componente): nella preview isolata di Fractal, aprire il dropdown della variante with-nav (@primary-navigation con voce “Dropdown”) può mostrare scrollbar orizzontale/verticale all’interno del riquadro di anteprima. Causa: il pannello di preview del tema Fractal (@frctl/mandelbrot) ha altezza fissa e ricalcola le dimensioni dell’iframe solo al load/resize, non quando un’interazione JS interna (apertura dropdown) fa crescere il contenuto. Non si verifica in una pagina reale, dove non c’è alcun wrapper ad altezza fissa attorno all’header (issue GitLab #29)