Componente

Dropdown

Menu a tendina su <details>/<summary> nativi con daisyUI dropdown e menu: apertura, chiusura con Esc e tastiera senza JavaScript. La tacca .italia è una pseudo-classe before che eredita lo sfondo del menu.

Riferimento: <it-dropdown>, <it-dropdown-item>
Classi: ita-dropdownita-menuita-menu-endita-menu-topita-menu-top-endita-menu-leftita-menu-rightita-menu-accentita-menu-fullita-menu-no-notchita-menu-item-lgita-chevron
Basato su (daisyUI): dropdowndropdown-contentdropdown-enddropdown-topdropdown-leftdropdown-rightmenumenu-titlemenu-disabled
Solo CSS: Niente Floating UI: il posizionamento è quello di daisyUI (dropdown-end, dropdown-top, dropdown-left, dropdown-right), quindi non c'è flip automatico. La tacca usa before:bg-inherit, così segue da sola il menu chiaro o scuro.
Storybook: Apri le storie di Dropdown

Varianti

Mostra il codice HTML

<div class="h-64 flex flex-wrap items-start gap-3">
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-secondary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-success gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-danger gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
</div>

Posizionamento

daisyUI posiziona il menu; la tacca segue l'allineamento.

Mostra il codice HTML

<div class="flex flex-col items-start gap-4 pb-56 sm:grid sm:h-80 sm:grid-cols-3 sm:place-items-center sm:gap-2 sm:pb-0">
  <div class="sm:col-start-2"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>
  <div class="sm:col-start-1 sm:row-start-2"><details class="dropdown ita-dropdown dropdown-right">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropend</span><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 ita-menu ita-menu-right">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>
  <div class="sm:col-start-3 sm:row-start-2"><details class="dropdown ita-dropdown dropdown-left">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropstart</span><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 ita-menu ita-menu-left">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>
  <div class="sm:col-start-2 sm:row-start-3"><details class="dropdown ita-dropdown dropdown-top">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropup</span><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 ita-menu ita-menu-top">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>
</div>

Menu con voci attive

Mostra il codice HTML

<div class="h-64 [&_details]:align-top"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#" aria-current="true"><span>Attivo<span class="sr-only"> attivo</span></span></a></li>
    <li><a href="#"><span>Non attivo</span></a></li>
    <li><a href="#"><span>Non attivo</span></a></li>
  </ul>
</details></div>

Menu con voci disabilitate

Mostra il codice HTML

<div class="h-64 flex flex-wrap items-start gap-3">
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li class="menu-disabled"><a href="#" aria-disabled="true" tabindex="-1"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
  <details class="dropdown ita-dropdown" aria-disabled="true">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Dropdown disabilitato</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details>
</div>

Menu con intestazioni e separatori

Mostra il codice HTML

<div class="h-64 [&_details]:align-top"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li class="menu-title">Intestazione</li>
    <li><a href="#"><span>Azione 1</span></a></li>
    <li role="separator"></li>
    <li><a href="#"><span>Azione 2</span></a></li>
  </ul>
</details></div>

Menu con voci grandi

Mostra il codice HTML

<div class="h-64 [&_details]:align-top"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu">
    <li><a href="#" class="ita-menu-item-lg"><span>Azione 1</span></a></li>
    <li><a href="#" class="ita-menu-item-lg"><span>Azione 2</span></a></li>
    <li><a href="#" class="ita-menu-item-lg"><span>Azione 3</span></a></li>
  </ul>
</details></div>

Menu con icone

Mostra il codice HTML

<div class="h-64 flex flex-wrap items-start gap-3">
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Icona a sinistra</span><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 ita-menu">
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg> <span>Azione 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,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg> <span>Azione 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,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg> <span>Azione 3</span></a></li>
  </ul>
</details>
  <details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Icona a destra</span><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 ita-menu">
    <li><a href="#"><span>Azione 1</span> <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg></a></li>
    <li><a href="#"><span>Azione 2</span> <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg></a></li>
    <li><a href="#"><span>Azione 3</span> <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,4.9l1.5,4.6l0.2,0.7h5.7l-4,2.9l-0.6,0.4l0.2,0.7l1.5,4.7L12.6,16L12,15.6L11.4,16l-3.9,2.9L9,14.2l0.2-0.7l-0.6-0.4 l-4-2.9h5.7l0.2-0.7L12,4.9 M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg></a></li>
  </ul>
</details>
</div>

Menu a tutta larghezza

Mostra il codice HTML

<div class="h-64 w-full max-w-md"><details class="dropdown ita-dropdown w-full">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu ita-menu-full">
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>

Menu su sfondo accent

surface: "accent", il blu profondo dello slim header: la variante scura di Dev Kit Italia, con il colore deciso dal tema.

Mostra il codice HTML

<div class="h-64 [&_details]:align-top"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Apri dropdown</span><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 ita-menu ita-menu-accent">
    <li class="menu-title">Intestazione</li>
    <li><a href="#"><span>Azione 1</span></a></li>
    <li><a href="#"><span>Azione 2</span></a></li>
    <li><a href="#"><span>Azione 3</span></a></li>
  </ul>
</details></div>

Menu di azioni

role="menu" per un menu di comandi invece di una lista di link.

Mostra il codice HTML

<div class="h-64 [&_details]:align-top"><details class="dropdown ita-dropdown">
  <summary class="ita-btn ita-btn-primary gap-2"><span>Modifica</span><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 ita-menu" role="menu">
    <li><a href="#"><span>Copia</span></a></li>
    <li><a href="#"><span>Taglia</span></a></li>
    <li><a href="#"><span>Incolla</span></a></li>
    <li role="separator"></li>
    <li><a href="#"><span>Elimina</span></a></li>
  </ul>
</details></div>