Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Header

Le tre fasce dell'intestazione .italia — slim, centrale e navigazione — su daisyUI menu, dropdown e navbar. Su mobile il menu si apre con una checkbox, senza JavaScript.

Riferimento
<it-header>
Classi
ita-headerita-header-shadowita-header-baseita-header-slimita-header-centerita-header-compactita-header-navita-header-containerita-header-toolsita-header-ownerita-header-linksita-header-langita-header-loginita-header-brandita-header-nameita-header-taglineita-header-socialsita-header-searchita-header-burgerita-header-collapseita-header-secondaryita-header-megaita-header-submenu
Basato su (daisyUI)
menumenu-horizontalmenu-verticalmenu-activedropdowndropdown-endbtnbtn-ghost
Solo CSS
Il passaggio desktop/mobile è una media query, non matchMedia: menu-vertical sotto lg, menu-horizontal da lg. I dropdown sono <details>/<summary>, quindi tastiera e chiusura funzionano da sole. Il menu mobile è una checkbox sr-only (ita-header:has(:checked)), al posto della modale del web component.
Storybook
Apri le storie di Header

Slim Header

Ente appartenenza
ITA
Accedi
Mostra il codice HTML
<div class="ita-header-slim">
  <div class="ita-header-container">
    <a href="#" class="ita-header-owner">Ente appartenenza</a>
    <nav aria-label="Navigazione accessoria" class="ita-header-links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" aria-current="page">Link 2 (Attivo)</a></li>
      </ul>
    </nav>
    <div class="ita-header-tools">
      <details class="dropdown dropdown-end ita-header-lang">
        <summary aria-label="Selettore lingua. Lingua attiva: ITA">ITA<svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></summary>
        <ul class="dropdown-content menu">
          <li><a href="#" class="menu-active">ITA <span class="sr-only">selezionata</span></a></li>
          <li><a href="#">ENG</a></li>
        </ul>
      </details>
      <a href="#" class="ita-btn ita-btn-inverse ita-btn-xs">Accedi</a>
    </div>
  </div>
</div>

Slim Header con pulsante full-responsive

Ente appartenenza
ITA
Mostra il codice HTML
<div class="ita-header-slim">
  <div class="ita-header-container">
    <a href="#" class="ita-header-owner">Ente appartenenza</a>
    <nav aria-label="Navigazione accessoria" class="ita-header-links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" aria-current="page">Link 2 (Attivo)</a></li>
      </ul>
    </nav>
    <div class="ita-header-tools">
      <details class="dropdown dropdown-end ita-header-lang">
        <summary aria-label="Selettore lingua. Lingua attiva: ITA">ITA<svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></summary>
        <ul class="dropdown-content menu">
          <li><a href="#" class="menu-active">ITA <span class="sr-only">selezionata</span></a></li>
          <li><a href="#">ENG</a></li>
        </ul>
      </details>
      <a href="#" class="ita-btn ita-btn-inverse ita-btn-xs ita-header-login" aria-label="Accedi all'area personale">
            <span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span>
            <span aria-hidden="true">Accedi all'area personale</span>
          </a>
    </div>
  </div>
</div>

Slim Header - sfondo base

Ente appartenenza
ITA
Accedi
Mostra il codice HTML
<div class="ita-header-slim ita-header-base">
  <div class="ita-header-container">
    <a href="#" class="ita-header-owner">Ente appartenenza</a>
    <nav aria-label="Navigazione accessoria" class="ita-header-links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" aria-current="page">Link 2 (Attivo)</a></li>
      </ul>
    </nav>
    <div class="ita-header-tools">
      <details class="dropdown dropdown-end ita-header-lang">
        <summary aria-label="Selettore lingua. Lingua attiva: ITA">ITA<svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></summary>
        <ul class="dropdown-content menu">
          <li><a href="#" class="menu-active">ITA <span class="sr-only">selezionata</span></a></li>
          <li><a href="#">ENG</a></li>
        </ul>
      </details>
      <a href="#" class="ita-btn ita-btn-primary ita-btn-xs">Accedi</a>
    </div>
  </div>
</div>

Header centrale

Nome dell'Istituzione Tag line dell'Istituzione
Seguici su
Cerca
Mostra il codice HTML
<div class="ita-header-center">
  <div class="ita-header-container">
    <div class="ita-header-brand">
      <a href="#">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg>
        <span>
          <span class="ita-header-name">Nome dell'Istituzione</span>
          <span class="ita-header-tagline">Tag line dell'Istituzione</span>
        </span>
      </a>
    </div>
    <div class="ita-header-tools">
      <div class="ita-header-socials">
        <span>Seguici su</span>
        <ul>
          <li><a href="#" aria-label="Facebook" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.6,22v-9.1h3.1l0.5-3.6h-3.5V7.1c0-1,0.3-1.7,1.8-1.7h1.9V2.1C16.3,2,15.4,2,14.4,2c-2.7,0-4.6,1.7-4.6,4.7v2.6H6.8v3.6h3.1V22H13.6z" /></svg></a></li>
          <li><a href="#" aria-label="Github" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2c-4.9,0-9.1,3.6-9.9,8.4s2.1,9.5,6.7,11.1c0.5,0.1,0.7-0.2,0.7-0.5s0-0.9,0-1.7C6.7,19.9,6.1,18,6.1,18 C6,17.4,5.5,16.8,5,16.5c-0.9-0.6,0.1-0.6,0.1-0.6c0.6,0.1,1.2,0.5,1.5,1c0.6,1,1.9,1.4,2.9,0.8c0-0.5,0.3-1,0.6-1.3 c-2.1-0.2-4.5-1.1-4.5-4.9c0-1,0.3-2,1-2.7C6.3,7.9,6.4,7,6.7,6.2c0,0,0.8-0.3,2.8,1c1.6-0.4,3.4-0.4,5,0c1.9-1.3,2.7-1,2.7-1 c0.4,0.8,0.4,1.8,0.1,2.6c0.7,0.7,1,1.7,1,2.7c0,3.8-2.3,4.7-4.6,4.9c0.5,0.5,0.7,1.2,0.7,1.9c0,1.3,0,2.4,0,2.8s0.2,0.6,0.7,0.5 c4.7-1.5,7.5-6.2,6.7-11.1S16.9,2,12,2z" /></svg></a></li>
          <li><a href="#" aria-label="Twitter" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.927 10.4911L19.5111 4H18.1879L13.3392 9.63609L9.4666 4H5L10.8562 12.5228L5 19.3296H6.32332L11.4436 13.3777L15.5334 19.3296H20L13.9267 10.4911H13.927ZM12.1146 12.5979L11.5212 11.7492L6.80014 4.99618H8.83269L12.6426 10.4461L13.236 11.2947L18.1885 18.3788H16.156L12.1146 12.5982V12.5979Z" /></svg></a></li>
        </ul>
      </div>
      <div class="ita-header-search">
        <span>Cerca</span>
        <a href="#" aria-label="Cerca nel sito"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></a>
      </div>
      
    </div>
  </div>
</div>

Header centrale - versione compatta

Nome dell'Istituzione Tag line dell'Istituzione
Seguici su
Cerca
Mostra il codice HTML
<div class="ita-header-center ita-header-compact">
  <div class="ita-header-container">
    <div class="ita-header-brand">
      <a href="#">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg>
        <span>
          <span class="ita-header-name">Nome dell'Istituzione</span>
          <span class="ita-header-tagline">Tag line dell'Istituzione</span>
        </span>
      </a>
    </div>
    <div class="ita-header-tools">
      <div class="ita-header-socials">
        <span>Seguici su</span>
        <ul>
          <li><a href="#" aria-label="Facebook" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.6,22v-9.1h3.1l0.5-3.6h-3.5V7.1c0-1,0.3-1.7,1.8-1.7h1.9V2.1C16.3,2,15.4,2,14.4,2c-2.7,0-4.6,1.7-4.6,4.7v2.6H6.8v3.6h3.1V22H13.6z" /></svg></a></li>
          <li><a href="#" aria-label="Github" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2c-4.9,0-9.1,3.6-9.9,8.4s2.1,9.5,6.7,11.1c0.5,0.1,0.7-0.2,0.7-0.5s0-0.9,0-1.7C6.7,19.9,6.1,18,6.1,18 C6,17.4,5.5,16.8,5,16.5c-0.9-0.6,0.1-0.6,0.1-0.6c0.6,0.1,1.2,0.5,1.5,1c0.6,1,1.9,1.4,2.9,0.8c0-0.5,0.3-1,0.6-1.3 c-2.1-0.2-4.5-1.1-4.5-4.9c0-1,0.3-2,1-2.7C6.3,7.9,6.4,7,6.7,6.2c0,0,0.8-0.3,2.8,1c1.6-0.4,3.4-0.4,5,0c1.9-1.3,2.7-1,2.7-1 c0.4,0.8,0.4,1.8,0.1,2.6c0.7,0.7,1,1.7,1,2.7c0,3.8-2.3,4.7-4.6,4.9c0.5,0.5,0.7,1.2,0.7,1.9c0,1.3,0,2.4,0,2.8s0.2,0.6,0.7,0.5 c4.7-1.5,7.5-6.2,6.7-11.1S16.9,2,12,2z" /></svg></a></li>
          <li><a href="#" aria-label="Twitter" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.927 10.4911L19.5111 4H18.1879L13.3392 9.63609L9.4666 4H5L10.8562 12.5228L5 19.3296H6.32332L11.4436 13.3777L15.5334 19.3296H20L13.9267 10.4911H13.927ZM12.1146 12.5979L11.5212 11.7492L6.80014 4.99618H8.83269L12.6426 10.4461L13.236 11.2947L18.1885 18.3788H16.156L12.1146 12.5982V12.5979Z" /></svg></a></li>
        </ul>
      </div>
      <div class="ita-header-search">
        <span>Cerca</span>
        <a href="#" aria-label="Cerca nel sito"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></a>
      </div>
      
    </div>
  </div>
</div>

Header centrale - sfondo base

Nome dell'Istituzione Tag line dell'Istituzione
Seguici su
Cerca
Mostra il codice HTML
<div class="ita-header-center ita-header-base">
  <div class="ita-header-container">
    <div class="ita-header-brand">
      <a href="#">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg>
        <span>
          <span class="ita-header-name">Nome dell'Istituzione</span>
          <span class="ita-header-tagline">Tag line dell'Istituzione</span>
        </span>
      </a>
    </div>
    <div class="ita-header-tools">
      <div class="ita-header-socials">
        <span>Seguici su</span>
        <ul>
          <li><a href="#" aria-label="Facebook" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.6,22v-9.1h3.1l0.5-3.6h-3.5V7.1c0-1,0.3-1.7,1.8-1.7h1.9V2.1C16.3,2,15.4,2,14.4,2c-2.7,0-4.6,1.7-4.6,4.7v2.6H6.8v3.6h3.1V22H13.6z" /></svg></a></li>
          <li><a href="#" aria-label="Github" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2c-4.9,0-9.1,3.6-9.9,8.4s2.1,9.5,6.7,11.1c0.5,0.1,0.7-0.2,0.7-0.5s0-0.9,0-1.7C6.7,19.9,6.1,18,6.1,18 C6,17.4,5.5,16.8,5,16.5c-0.9-0.6,0.1-0.6,0.1-0.6c0.6,0.1,1.2,0.5,1.5,1c0.6,1,1.9,1.4,2.9,0.8c0-0.5,0.3-1,0.6-1.3 c-2.1-0.2-4.5-1.1-4.5-4.9c0-1,0.3-2,1-2.7C6.3,7.9,6.4,7,6.7,6.2c0,0,0.8-0.3,2.8,1c1.6-0.4,3.4-0.4,5,0c1.9-1.3,2.7-1,2.7-1 c0.4,0.8,0.4,1.8,0.1,2.6c0.7,0.7,1,1.7,1,2.7c0,3.8-2.3,4.7-4.6,4.9c0.5,0.5,0.7,1.2,0.7,1.9c0,1.3,0,2.4,0,2.8s0.2,0.6,0.7,0.5 c4.7-1.5,7.5-6.2,6.7-11.1S16.9,2,12,2z" /></svg></a></li>
          <li><a href="#" aria-label="Twitter" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.927 10.4911L19.5111 4H18.1879L13.3392 9.63609L9.4666 4H5L10.8562 12.5228L5 19.3296H6.32332L11.4436 13.3777L15.5334 19.3296H20L13.9267 10.4911H13.927ZM12.1146 12.5979L11.5212 11.7492L6.80014 4.99618H8.83269L12.6426 10.4461L13.236 11.2947L18.1885 18.3788H16.156L12.1146 12.5982V12.5979Z" /></svg></a></li>
        </ul>
      </div>
      <div class="ita-header-search">
        <span>Cerca</span>
        <a href="#" aria-label="Cerca nel sito"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></a>
      </div>
      
    </div>
  </div>
</div>

Header completo

Sotto lg la fascia di navigazione si apre con il pulsante burger.

Ente appartenenza
ITA
Accedi
Nome dell'Istituzione Tag line dell'Istituzione
Seguici su
Cerca
Mostra il codice HTML
<header class="ita-header">
<div class="ita-header-slim">
  <div class="ita-header-container">
    <a href="#" class="ita-header-owner">Ente appartenenza</a>
    <nav aria-label="Navigazione accessoria" class="ita-header-links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" aria-current="page">Link 2 (Attivo)</a></li>
      </ul>
    </nav>
    <div class="ita-header-tools">
      <details class="dropdown dropdown-end ita-header-lang">
        <summary aria-label="Selettore lingua. Lingua attiva: ITA">ITA<svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></summary>
        <ul class="dropdown-content menu">
          <li><a href="#" class="menu-active">ITA <span class="sr-only">selezionata</span></a></li>
          <li><a href="#">ENG</a></li>
        </ul>
      </details>
      <a href="#" class="ita-btn ita-btn-inverse ita-btn-xs">Accedi</a>
    </div>
  </div>
</div>
<div class="ita-header-center">
  <div class="ita-header-container">
    <div class="ita-header-brand">
      <a href="#">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg>
        <span>
          <span class="ita-header-name">Nome dell'Istituzione</span>
          <span class="ita-header-tagline">Tag line dell'Istituzione</span>
        </span>
      </a>
    </div>
    <div class="ita-header-tools">
      <div class="ita-header-socials">
        <span>Seguici su</span>
        <ul>
          <li><a href="#" aria-label="Facebook" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.6,22v-9.1h3.1l0.5-3.6h-3.5V7.1c0-1,0.3-1.7,1.8-1.7h1.9V2.1C16.3,2,15.4,2,14.4,2c-2.7,0-4.6,1.7-4.6,4.7v2.6H6.8v3.6h3.1V22H13.6z" /></svg></a></li>
          <li><a href="#" aria-label="Github" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2c-4.9,0-9.1,3.6-9.9,8.4s2.1,9.5,6.7,11.1c0.5,0.1,0.7-0.2,0.7-0.5s0-0.9,0-1.7C6.7,19.9,6.1,18,6.1,18 C6,17.4,5.5,16.8,5,16.5c-0.9-0.6,0.1-0.6,0.1-0.6c0.6,0.1,1.2,0.5,1.5,1c0.6,1,1.9,1.4,2.9,0.8c0-0.5,0.3-1,0.6-1.3 c-2.1-0.2-4.5-1.1-4.5-4.9c0-1,0.3-2,1-2.7C6.3,7.9,6.4,7,6.7,6.2c0,0,0.8-0.3,2.8,1c1.6-0.4,3.4-0.4,5,0c1.9-1.3,2.7-1,2.7-1 c0.4,0.8,0.4,1.8,0.1,2.6c0.7,0.7,1,1.7,1,2.7c0,3.8-2.3,4.7-4.6,4.9c0.5,0.5,0.7,1.2,0.7,1.9c0,1.3,0,2.4,0,2.8s0.2,0.6,0.7,0.5 c4.7-1.5,7.5-6.2,6.7-11.1S16.9,2,12,2z" /></svg></a></li>
          <li><a href="#" aria-label="Twitter" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.927 10.4911L19.5111 4H18.1879L13.3392 9.63609L9.4666 4H5L10.8562 12.5228L5 19.3296H6.32332L11.4436 13.3777L15.5334 19.3296H20L13.9267 10.4911H13.927ZM12.1146 12.5979L11.5212 11.7492L6.80014 4.99618H8.83269L12.6426 10.4461L13.236 11.2947L18.1885 18.3788H16.156L12.1146 12.5982V12.5979Z" /></svg></a></li>
        </ul>
      </div>
      <div class="ita-header-search">
        <span>Cerca</span>
        <a href="#" aria-label="Cerca nel sito"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></a>
      </div>
      <input id="header-nav-1" type="checkbox" class="sr-only" aria-label="Mostra la navigazione">
      <label for="header-nav-1" class="ita-header-burger">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M22,5v1H2V5H22z M2,12.5h20v-1H2V12.5z M2,19h20v-1H2V19z" /></svg>
      </label>
    </div>
  </div>
</div>
<div class="ita-header-collapse">
<div class="ita-header-nav">
  <nav aria-label="Navigazione principale">
    <div>
      <ul class="menu menu-vertical lg:menu-horizontal">
        <li><a href="#" aria-current="page">Link attivo</a></li>
        <li><a href="#" aria-disabled="true" tabindex="-1">Link disabilitato</a></li>
        <li>
        <details>
          <summary>Dropdown</summary>
          <ul class="ita-header-submenu">
            <li><a href="#">Link lista 1</a></li>
            <li><a href="#">Link lista 2</a></li>
            <li><a href="#">Link lista 3</a></li>
          </ul>
        </details>
      </li>
        <li class="ita-header-mega">
        <details>
          <summary>Megamenu</summary>
          <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        <div class="ita-megamenu-header">
          <a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Esplora la sezione Megamenu</span></a>
        </div>
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
        </details>
      </li>
      </ul>
      
    </div>
  </nav>
</div>
</div>
</header>

Header completo - sfondo base

Ente appartenenza
ITA
Accedi
Nome dell'Istituzione Tag line dell'Istituzione
Seguici su
Cerca
Mostra il codice HTML
<header class="ita-header ita-header-shadow">
<div class="ita-header-slim ita-header-base">
  <div class="ita-header-container">
    <a href="#" class="ita-header-owner">Ente appartenenza</a>
    <nav aria-label="Navigazione accessoria" class="ita-header-links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" aria-current="page">Link 2 (Attivo)</a></li>
      </ul>
    </nav>
    <div class="ita-header-tools">
      <details class="dropdown dropdown-end ita-header-lang">
        <summary aria-label="Selettore lingua. Lingua attiva: ITA">ITA<svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></summary>
        <ul class="dropdown-content menu">
          <li><a href="#" class="menu-active">ITA <span class="sr-only">selezionata</span></a></li>
          <li><a href="#">ENG</a></li>
        </ul>
      </details>
      <a href="#" class="ita-btn ita-btn-primary ita-btn-xs">Accedi</a>
    </div>
  </div>
</div>
<div class="ita-header-center ita-header-base">
  <div class="ita-header-container">
    <div class="ita-header-brand">
      <a href="#">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg>
        <span>
          <span class="ita-header-name">Nome dell'Istituzione</span>
          <span class="ita-header-tagline">Tag line dell'Istituzione</span>
        </span>
      </a>
    </div>
    <div class="ita-header-tools">
      <div class="ita-header-socials">
        <span>Seguici su</span>
        <ul>
          <li><a href="#" aria-label="Facebook" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.6,22v-9.1h3.1l0.5-3.6h-3.5V7.1c0-1,0.3-1.7,1.8-1.7h1.9V2.1C16.3,2,15.4,2,14.4,2c-2.7,0-4.6,1.7-4.6,4.7v2.6H6.8v3.6h3.1V22H13.6z" /></svg></a></li>
          <li><a href="#" aria-label="Github" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2c-4.9,0-9.1,3.6-9.9,8.4s2.1,9.5,6.7,11.1c0.5,0.1,0.7-0.2,0.7-0.5s0-0.9,0-1.7C6.7,19.9,6.1,18,6.1,18 C6,17.4,5.5,16.8,5,16.5c-0.9-0.6,0.1-0.6,0.1-0.6c0.6,0.1,1.2,0.5,1.5,1c0.6,1,1.9,1.4,2.9,0.8c0-0.5,0.3-1,0.6-1.3 c-2.1-0.2-4.5-1.1-4.5-4.9c0-1,0.3-2,1-2.7C6.3,7.9,6.4,7,6.7,6.2c0,0,0.8-0.3,2.8,1c1.6-0.4,3.4-0.4,5,0c1.9-1.3,2.7-1,2.7-1 c0.4,0.8,0.4,1.8,0.1,2.6c0.7,0.7,1,1.7,1,2.7c0,3.8-2.3,4.7-4.6,4.9c0.5,0.5,0.7,1.2,0.7,1.9c0,1.3,0,2.4,0,2.8s0.2,0.6,0.7,0.5 c4.7-1.5,7.5-6.2,6.7-11.1S16.9,2,12,2z" /></svg></a></li>
          <li><a href="#" aria-label="Twitter" target="_blank" rel="noopener"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.927 10.4911L19.5111 4H18.1879L13.3392 9.63609L9.4666 4H5L10.8562 12.5228L5 19.3296H6.32332L11.4436 13.3777L15.5334 19.3296H20L13.9267 10.4911H13.927ZM12.1146 12.5979L11.5212 11.7492L6.80014 4.99618H8.83269L12.6426 10.4461L13.236 11.2947L18.1885 18.3788H16.156L12.1146 12.5982V12.5979Z" /></svg></a></li>
        </ul>
      </div>
      <div class="ita-header-search">
        <span>Cerca</span>
        <a href="#" aria-label="Cerca nel sito"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></a>
      </div>
      <input id="header-nav-2" type="checkbox" class="sr-only" aria-label="Mostra la navigazione">
      <label for="header-nav-2" class="ita-header-burger">
        <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M22,5v1H2V5H22z M2,12.5h20v-1H2V12.5z M2,19h20v-1H2V19z" /></svg>
      </label>
    </div>
  </div>
</div>
<div class="ita-header-collapse">
<div class="ita-header-nav ita-header-base">
  <nav aria-label="Navigazione principale">
    <div>
      <ul class="menu menu-vertical lg:menu-horizontal">
        <li><a href="#" aria-current="page">Link attivo</a></li>
        <li><a href="#" aria-disabled="true" tabindex="-1">Link disabilitato</a></li>
        <li>
        <details>
          <summary>Dropdown</summary>
          <ul class="ita-header-submenu">
            <li><a href="#">Link lista 1</a></li>
            <li><a href="#">Link lista 2</a></li>
            <li><a href="#">Link lista 3</a></li>
          </ul>
        </details>
      </li>
        <li class="ita-header-mega">
        <details>
          <summary>Megamenu</summary>
          <div class="ita-megamenu">
      <div class="ita-megamenu-grid">
        <div class="ita-megamenu-main">
        <div class="ita-megamenu-header">
          <a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Esplora la sezione Megamenu</span></a>
        </div>
        <ul class="ita-megamenu-list">
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 1</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 2</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 3</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 4</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 5</span></a></li>
          <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.8V9.2c0-0.6,0.5-1,1-1c0.3,0,0.5,0.1,0.7,0.3l3.5,3.5l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0C12.1,15.3,12,15.1,12,14.8z" /></svg><span>Link lista 6</span></a></li>
        </ul>
      </div>
      </div>
    </div>
        </details>
      </li>
      </ul>
      
    </div>
  </nav>
</div>
</div>
</header>