<header class="rtds-header" id="siteHeader" aria-label="Header del servizio">
<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">
</div>
<div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 xl:rtds-gap-6 rtds-ml-auto">
<a href="#" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--outlined">
Login
<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#outline--arrow-right-start-on-rectangle" />
</svg>
</a>
</div>
<!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<div class="rtds-main-heading">
<div class="rtds-main-heading__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-flex-1">
<div class="rtds-site-branding rtds-branding rtds-gap-4" style="--branding-max-width: 326px; --branding-max-width-xl: 326px;">
<a class="rtds-site-logo xs:rtds-flex-none rtds-logo--main rtds-w-[35px] rtds-h-[35px] md:rtds-w-[75px] md:rtds-h-[75px]" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo-regione-square@2x.png" srcset="../../images/logo-regione-square@2x.png 1x, ../../images/logo-regione-square@2x@2x.png 2x" alt="Regione Toscana - home page" width="75" height="75" />
</a>
<div class="rtds-site-branding__secondary">
<a class="rtds-site-logo rtds-logo--secondary rtds-logo--secondary rtds-w-auto" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="../../images/logo-regione-square@2x.png" alt="Nome Servizio - home page" width="265" height="75" />
</a>
<span class="rtds-site-branding__secondary-text">
Nome Servizio
</span>
</div>
</div>
<div class="rtds-main-headings__center rtds-flex-1 lg:rtds-ml-auto lg:rtds-justify-end">
<div class="rtds-flex rtds-gap-3 rtds-justify-end rtds-items-center">
<nav class="rtds-primary-navigation lg:rtds-justify-end" 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" 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 ">
<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">
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-base xl:rtds-text-lg 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-base xl:rtds-text-lg 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-base xl:rtds-text-lg 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-base xl:rtds-text-lg 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-base xl:rtds-text-lg 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-base xl:rtds-text-lg 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>
<!-- Mobile search in panel -->
<div class="rtds-primary-navigation__module is-main lg:rtds-hidden is-last-element">
<div class="rtds-pb-1 rtds-border-b rtds-border-gray-01 rtds-grid">
<a href="#" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--outlined">
Accedi
<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#outline--arrow-right-start-on-rectangle" />
</svg>
</a>
</div>
<form role="search" class="rtds-flex rtds-items-end rtds-p-3 rtds-gap-1">
<div class="rtds-input-field rtds-gap-1 rtds-flex-1 ">
<label for="inputSearchMobile" class="rtds-input-field__label">
Cerca
servizi, informazioni, aiuti...
</label>
<div class="rtds-input">
<input id="inputSearchMobile" class="rtds-rounded-l-lg rtds-rounded-r-none rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="rtds-btn rtds-btn--secondary rtds-btn--icon rtds-w-11 rtds-h-11 rtds-rounded-lg">
<span class="rtds-sr-only">Cerca</span>
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
</form>
</div>
</div>
<div class="rtds-primary-navigation__backdrop rtds-bg-black/25 rtds-top-[--header-height] lg:rtds-hidden"></div>
</nav>
</div>
</div>
</div>
</div>
</header>
<header class="rtds-header" id="siteHeader" aria-label="Header del servizio">
{% render '@top-bar', {
hasTopBarSocial: false,
hasSearchButton: false,
hasSecondaryNav: false,
hasVerticalDivider: false,
hasUserDropdown: hasUserDropdown,
userDropdown: userDropdown,
spacing: 'rtds-py-1 md:rtds-py-2 rtds-px-4'
}, true %}
{% render '@main-heading--logo-square--servizio--panel', {
logoWidth: '75',
logoHeight: '75',
logoClasses: 'xs:rtds-flex-none',
logoSize: 'rtds-w-[35px] rtds-h-[35px] md:rtds-w-[75px] md:rtds-h-[75px]',
brandingMaxWidth: '326px',
brandingMaxWidthXl: '326px',
logoDivider: 'false',
secondLogo: 'true',
logoPath: '/images/logo-regione-square@2x.png',
logoSrcset: '/images/logo-regione-square@2x.png 1x, /images/logo-regione-square@2x@2x.png 2x',
secondLogoPath: secondLogoPath,
secondLogoAlt: secondLogoAlt,
secondaryLogoText: secondaryLogoText,
secondLogoWidth: '265',
secondLogoHeight: '75',
secondLogoHref: secondLogoHref if secondLogoHref else '#',
brandingGap: 'rtds-gap-4',
hasSearchButton: 'false',
headingSocial: 'false',
verticalDividerClasses: 'rtds-hidden lg:rtds-block',
hasUserDropdown: hasUserDropdown,
userDropdown: userDropdown
}, true %}
</header>
{
"hasUserDropdown": true,
"userDropdown": {
"isUserLoggedIn": false,
"userDropdownId": "userDropdown"
},
"secondLogoPath": "/images/logo-regione-square@2x.png",
"secondLogoAlt": "Nome Servizio - home page",
"secondaryLogoText": "Nome Servizio",
"secondLogoHref": "#"
}
Testata per le pagine dei template-servizi. Combina @top-bar-servizi (visibile solo su desktop) e @main-heading--logo-square--servizio, con due pattern alternativi per la gestione dell’area utente su mobile.
Renderizza un <header> con:
| Variante | Pattern mobile | Descrizione |
|---|---|---|
default |
bar | Utente non loggato — Login button visibile direttamente nella barra |
utente-loggato |
bar | Utente loggato — menu utente visibile direttamente nella barra |
panel |
panel | Utente non loggato — Login button nel pannello hamburger |
panel--loggato |
panel | Utente loggato — menu utente nel pannello hamburger |
Pattern bar (default, utente-loggato): l’area utente è posizionata direttamente nella barra del main-heading, visibile immediatamente su mobile senza aprire alcun pannello. Il dropdown (stato loggato) si sovrappone al contenuto con position: absolute.
Pattern panel (panel, panel--loggato): l’area utente è inserita nel pannello hamburger di navigazione, sopra la form di ricerca. Segue il pattern del sito istituzionale standard.
| Parametro | Tipo | Obbligatorio | Default | Descrizione |
|---|---|---|---|---|
hasUserDropdown |
boolean | No | true |
Mostra l’area utente (Login o menu) |
userDropdown |
object | No | — | Context per @user-dropdown |
userDropdown.isUserLoggedIn |
boolean | No | false |
Stato autenticazione |
userDropdown.userDropdownId |
string | No | 'userDropdown' |
ID del dropdown utente (solo desktop) |
secondLogoPath |
string | Sì | — | Path del logo del servizio |
secondLogoAlt |
string | Sì | — | Testo alternativo del logo servizio |
secondaryLogoText |
string | No | — | Nome testuale del servizio |
secondLogoHref |
string | No | '#' |
URL del link sul logo servizio |
<header> ha aria-label="Header del servizio" e id="siteHeader"aria-hidden="true"<nav aria-label="Utente"> con aria-expanded gestito da dropdown-menu.js@top-bar-servizi (non @top-bar) per l’area utente desktop — permette varianti specifiche per il contesto servizi@top-bar-servizi riceve solo hasUserDropdown e userDropdown; il padding (spacing) è gestito internamente dal componenteuserDropdownId: 'userDropdownMobile' e listClasses: 'rtds-absolute' per evitare espansione in-flow<nav> in user-dropdown-servizi.njk ha id="userDropdown" hardcoded — in presenza di top-bar desktop + dropdown mobile si producono due elementi con lo stesso ID. Da correggere in change separato11-templates-servizi/) in sostituzione del blocco @skip-link + <header> + @top-bar + @main-heading--logo-square