Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Toolbar

Barra di azioni con icone ed etichette, divisori, contatori e un menu «Altro»: una lista di link con utility Tailwind, daisyUI indicator per i badge e Dropdown per il menu.

Riferimento
<it-toolbar>
Classi
ita-toolbarita-toolbar-lgita-toolbar-smita-toolbar-verticalita-toolbar-itemita-toolbar-labelita-indicator-countita-indicator-dot
Basato su (daisyUI)
indicatorindicator-itembadgestatusdropdownmenu
Solo CSS
Il menu «Altro» è lo stesso Dropdown su <details>. Nella misura piccola le etichette restano per i lettori di schermo e in title. Le frecce fra le voci (roving tabindex di role=toolbar) richiedono JavaScript: qui si naviga con Tab, per questo è un <nav> di link e non role=toolbar.
Storybook
Apri le storie di Toolbar

Esempio base

Mostra il codice HTML
<div class="h-56"><nav aria-label="Barra degli strumenti" class="ita-toolbar">
  <ul>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="ita-toolbar-label">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="ita-toolbar-label">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="ita-toolbar-label">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="ita-toolbar-label">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-dot" aria-hidden="true"></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></span><span class="ita-toolbar-label">Preferiti</span><span class="sr-only">, novità</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-disabled="true" tabindex="-1"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></span><span class="ita-toolbar-label">Elimina</span></a></li>
    <li><details class="dropdown dropdown-end">
      <summary class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,18c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,18,11.9,18,12,18 M12,17c-1.1,0-2,0.9-2,2 s0.9,2,2,2s2-0.9,2-2S13.1,17,12,17z M12,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,11,11.9,11,12,11 M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M12,4c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2c0,0.6-0.4,1-1,1 s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,4,11.9,4,12,4 M12,3c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,3,12,3z" /></svg></span><span class="ita-toolbar-label">Altro</span></summary>
      <ul class="dropdown-content menu ita-menu ita-menu-end">
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.5,4H18V3.4C17.9,2.6,17.3,2,16.5,2h-11C4.7,2,4.1,2.6,4,3.4v15.2C4.1,19.4,4.7,20,5.5,20H7v0.6C7.1,21.4,7.7,22,8.5,22 h11c0.8,0,1.4-0.6,1.5-1.4V5.4C20.9,4.6,20.3,4,19.5,4z M5,18.6V3.4C5,3.2,5.3,3,5.5,3h11C16.7,3,17,3.2,17,3.4v15.2 c0,0.2-0.3,0.4-0.5,0.4h-11C5.3,19,5,18.8,5,18.6z M20,20.6c0,0.2-0.3,0.4-0.5,0.4h-11C8.3,21,8,20.8,8,20.6V20h8.5 c0.8,0,1.4-0.6,1.5-1.4V5h1.5C19.7,5,20,5.2,20,5.4V20.6z" /></svg> <span>Copia il link</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg> <span>Invia per email</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,8l3.3-5H5V2H4v20h1v-9h15.4L17.1,8z M5,4h13.6l-2.7,4l2.7,4H5V4z" /></svg> <span>Segnala un problema</span></a></li>
  </ul>
    </details></li>
  </ul>
</nav></div>

Dimensioni

Mostra il codice HTML
<div class="flex flex-col items-start gap-6">
<nav aria-label="Barra degli strumenti" class="ita-toolbar ita-toolbar-lg">
  <ul>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="ita-toolbar-label">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="ita-toolbar-label">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="ita-toolbar-label">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="ita-toolbar-label">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
  </ul>
</nav>
<nav aria-label="Barra degli strumenti" class="ita-toolbar">
  <ul>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="ita-toolbar-label">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="ita-toolbar-label">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="ita-toolbar-label">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="ita-toolbar-label">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
  </ul>
</nav>
<nav aria-label="Barra degli strumenti" class="ita-toolbar ita-toolbar-sm">
  <ul>
    <li><a href="#" class="ita-toolbar-item" title="Condividi"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="sr-only">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page" title="Scarica"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="sr-only">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item" title="Stampa"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="sr-only">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item" title="Commenti"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="sr-only">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
  </ul>
</nav>
</div>

Verticale

Mostra il codice HTML
<div class="h-96"><nav aria-label="Barra degli strumenti" class="ita-toolbar ita-toolbar-vertical">
  <ul>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="ita-toolbar-label">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="ita-toolbar-label">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="ita-toolbar-label">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="ita-toolbar-label">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-dot" aria-hidden="true"></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></span><span class="ita-toolbar-label">Preferiti</span><span class="sr-only">, novità</span></a></li>
    <li><details class="dropdown dropdown-right">
      <summary class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,18c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,18,11.9,18,12,18 M12,17c-1.1,0-2,0.9-2,2 s0.9,2,2,2s2-0.9,2-2S13.1,17,12,17z M12,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,11,11.9,11,12,11 M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M12,4c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2c0,0.6-0.4,1-1,1 s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,4,11.9,4,12,4 M12,3c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,3,12,3z" /></svg></span><span class="ita-toolbar-label">Altro</span></summary>
      <ul class="dropdown-content menu ita-menu ita-menu-right">
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.5,4H18V3.4C17.9,2.6,17.3,2,16.5,2h-11C4.7,2,4.1,2.6,4,3.4v15.2C4.1,19.4,4.7,20,5.5,20H7v0.6C7.1,21.4,7.7,22,8.5,22 h11c0.8,0,1.4-0.6,1.5-1.4V5.4C20.9,4.6,20.3,4,19.5,4z M5,18.6V3.4C5,3.2,5.3,3,5.5,3h11C16.7,3,17,3.2,17,3.4v15.2 c0,0.2-0.3,0.4-0.5,0.4h-11C5.3,19,5,18.8,5,18.6z M20,20.6c0,0.2-0.3,0.4-0.5,0.4h-11C8.3,21,8,20.8,8,20.6V20h8.5 c0.8,0,1.4-0.6,1.5-1.4V5h1.5C19.7,5,20,5.2,20,5.4V20.6z" /></svg> <span>Copia il link</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg> <span>Invia per email</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,8l3.3-5H5V2H4v20h1v-9h15.4L17.1,8z M5,4h13.6l-2.7,4l2.7,4H5V4z" /></svg> <span>Segnala un problema</span></a></li>
  </ul>
    </details></li>
  </ul>
</nav></div>

Su sfondo primario

Il contenitore ha la classe it-surface-primary: i token si scambiano (base diventa primary, primary diventa primary-content) e il componente si adatta senza opzioni.

Mostra il codice HTML
<div class="it-surface-primary h-56 rounded-box p-6"><nav aria-label="Barra degli strumenti" class="ita-toolbar">
  <ul>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.5,15c-0.8,0-1.5,0.4-2,1l-7.6-3.4C8,12.4,8,12.2,8,12c0-0.2,0-0.4-0.1-0.6L15.5,8c0.8,1.1,2.4,1.3,3.5,0.5 s1.3-2.4,0.5-3.5S17.1,3.7,16,4.5c-0.6,0.5-1,1.2-1,2c0,0.2,0,0.4,0.1,0.6l-7.6,3.4C6.7,9.4,5.1,9.2,4,10s-1.3,2.4-0.5,3.5 S5.9,14.8,7,14c0.2-0.1,0.4-0.3,0.5-0.5l7.6,3.4C15,17.1,15,17.3,15,17.5c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5S18.9,15,17.5,15z M17.5,5C18.3,5,19,5.7,19,6.5S18.3,8,17.5,8S16,7.3,16,6.5S16.7,5,17.5,5z M5.5,13.5C4.7,13.5,4,12.8,4,12s0.7-1.5,1.5-1.5 S7,11.2,7,12S6.3,13.5,5.5,13.5z M17.5,19c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,19,17.5,19z" /></svg></span><span class="ita-toolbar-label">Condividi</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-current="page"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg></span><span class="ita-toolbar-label">Scarica</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,9.5C21,8.7,20.3,8,19.5,8H17V3H7v5H4.5C3.7,8,3,8.7,3,9.5V16h2v3h2v2h10v-2h2v-3h2V9.5z M8,4h8v4H8V4z M6,18v-4h1v4H6z M16,20H8v-6h8V20z M18,18h-1v-4h1V18z M20,15h-1v-2H5v2H4V9.5C4,9.2,4.2,9,4.5,9h15C19.8,9,20,9.2,20,9.5V15z M6,11h4v1H6V11z" /></svg></span><span class="ita-toolbar-label">Stampa</span></a></li>
    <li role="separator"></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">4</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19,3H5C3.9,3,3,3.9,3,5v10c0,1.1,0.9,2,2,2h2v5.4l1.7-1.7l3.7-3.7H19c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M20,15 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0h-7l-4,4v-4H5c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V5C3.9,4.5,4.3,4.1,4.8,4 C4.9,4,4.9,4,5,4h14c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V15z M9,10c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0 c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2C6.9,9.5,7.3,9.1,7.8,9C7.9,9,7.9,9,8,9c0.5-0.1,0.9,0.3,1,0.8C9,9.9,9,9.9,9,10z M13,10 c0,0.6-0.4,1-1,1s-1-0.4-1-1s0.4-1,1-1S13,9.4,13,10z M17,10c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1s0.4-1,1-1C16.6,9,17,9.4,17,10z" /></svg></span><span class="ita-toolbar-label">Commenti</span><span class="sr-only">, 4 nuovi commenti</span></a></li>
    <li><a href="#" class="ita-toolbar-item"><span class="indicator"><span class="indicator-item ita-indicator-dot" aria-hidden="true"></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></span><span class="ita-toolbar-label">Preferiti</span><span class="sr-only">, novità</span></a></li>
    <li><a href="#" class="ita-toolbar-item" aria-disabled="true" tabindex="-1"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></span><span class="ita-toolbar-label">Elimina</span></a></li>
    <li><details class="dropdown dropdown-end">
      <summary class="ita-toolbar-item"><span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,18c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,18,11.9,18,12,18 M12,17c-1.1,0-2,0.9-2,2 s0.9,2,2,2s2-0.9,2-2S13.1,17,12,17z M12,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,11,11.9,11,12,11 M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M12,4c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2c0,0.6-0.4,1-1,1 s-1-0.4-1-1c-0.1-0.5,0.3-0.9,0.8-1C11.9,4,11.9,4,12,4 M12,3c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,3,12,3z" /></svg></span><span class="ita-toolbar-label">Altro</span></summary>
      <ul class="dropdown-content menu ita-menu ita-menu-end">
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.5,4H18V3.4C17.9,2.6,17.3,2,16.5,2h-11C4.7,2,4.1,2.6,4,3.4v15.2C4.1,19.4,4.7,20,5.5,20H7v0.6C7.1,21.4,7.7,22,8.5,22 h11c0.8,0,1.4-0.6,1.5-1.4V5.4C20.9,4.6,20.3,4,19.5,4z M5,18.6V3.4C5,3.2,5.3,3,5.5,3h11C16.7,3,17,3.2,17,3.4v15.2 c0,0.2-0.3,0.4-0.5,0.4h-11C5.3,19,5,18.8,5,18.6z M20,20.6c0,0.2-0.3,0.4-0.5,0.4h-11C8.3,21,8,20.8,8,20.6V20h8.5 c0.8,0,1.4-0.6,1.5-1.4V5h1.5C19.7,5,20,5.2,20,5.4V20.6z" /></svg> <span>Copia il link</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg> <span>Invia per email</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,8l3.3-5H5V2H4v20h1v-9h15.4L17.1,8z M5,4h13.6l-2.7,4l2.7,4H5V4z" /></svg> <span>Segnala un problema</span></a></li>
  </ul>
    </details></li>
  </ul>
</nav></div>

Con JavaScript (opzionale)

La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.

Frecce fra le voci (role=toolbar)js

Roving tabindex: un solo Tab per entrare, poi frecce, Home e Fine. Aggiungi role=toolbar e aria-label alla lista.

document.querySelectorAll("[role=toolbar]").forEach((bar) => {
  const items = [...bar.querySelectorAll("a, button, summary")].filter((el) => !el.matches("[aria-disabled=true]"));
  items.forEach((el, i) => (el.tabIndex = i === 0 ? 0 : -1));
  bar.addEventListener("keydown", (e) => {
    const i = items.indexOf(document.activeElement);
    if (i < 0) return;
    const vertical = bar.getAttribute("aria-orientation") === "vertical";
    const keys = vertical ? { ArrowDown: 1, ArrowUp: -1 } : { ArrowRight: 1, ArrowLeft: -1 };
    let n = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : keys[e.key] !== undefined ? i + keys[e.key] : null;
    if (n === null) return;
    e.preventDefault();
    n = (n + items.length) % items.length;
    items[i].tabIndex = -1;
    items[n].tabIndex = 0;
    items[n].focus();
  });
});

Hook Reacttsx

import { useRef, type KeyboardEvent } from "react";

/** Roving tabindex for a horizontal toolbar: spread the result on the container. */
export function useRovingToolbar() {
  const ref = useRef<HTMLDivElement>(null);
  const onKeyDown = (e: KeyboardEvent) => {
    const items = [...(ref.current?.querySelectorAll<HTMLElement>("a, button") ?? [])];
    const i = items.indexOf(document.activeElement as HTMLElement);
    const step = { ArrowRight: 1, ArrowLeft: -1 }[e.key as "ArrowRight" | "ArrowLeft"];
    if (i < 0 || step === undefined) return;
    e.preventDefault();
    const n = (i + step + items.length) % items.length;
    items.forEach((el, k) => (el.tabIndex = k === n ? 0 : -1));
    items[n].focus();
  };
  return { ref, role: "toolbar", onKeyDown };
}
// <div {...useRovingToolbar()} aria-label="Barra degli strumenti">…</div>