Sidebar

La navigazione laterale comprimibile del guscio dell'app — collasso a sola icona, un Sheet mobile offcanvas, e tooltip quando è compressa a icone. Nell'uso reale Sidebar è position: fixed rispetto al viewport per design (collapsible="icon" o "offcanvas", come nello snippet del vero guscio d'app sotto) — l'anteprima live qui usa invece collapsible="none" (un semplice <div> non fixed) solo per poter essere renderizzata contenuta in questo riquadro delimitato; è la stessa tecnica che usa la sidebar di questo stesso sito.

import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTooltipProvider, SidebarTrigger } from "@pompeitech/vesuvius-ui";

Default

SidebarTrigger funziona comunque in questa anteprima (attiva/disattiva lo stato open di SidebarProvider), ma con collapsible="none" la Sidebar stessa non si comprime davvero — quel comportamento richiede collapsible="icon" o "offcanvas", che a loro volta richiedono position: fixed. La forma reale del guscio d'app:

function AppShell() {
  return (
    <SidebarTooltipProvider>
      <SidebarProvider>
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <div className="px-2 py-1.5 text-sm font-semibold">Vesuvius UI</div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Ecommerce</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton tooltip="Dashboard">
                      <HomeIcon />
                      <span>Dashboard</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset>
          <header className="flex h-14 items-center gap-2 border-b px-4">
            <SidebarTrigger />
            <span className="text-sm font-medium">Dashboard</span>
          </header>
          <div className="p-4">Page content</div>
        </SidebarInset>
      </SidebarProvider>
    </SidebarTooltipProvider>
  );
}

Per renderizzare l'albero del menu stesso a partire dai dati invece di annidare a mano i SidebarMenuItem, vedi SidebarNav.

API

SidebarProvider

Registra anche la scorciatoia da tastiera ⌘/Ctrl+B per attivare/disattivare la sidebar globalmente mentre è montata.

useSidebar() — l'hook da cui legge ogni parte sottostante; lancia un errore fuori da un SidebarProvider.

SidebarTooltipProvider — avvolge il TooltipProvider di Radix; obbligatorio come antenato perché funzionino i tooltip dello stato compresso a icone. Ogni prop accettata da TooltipProvider.

Sidebar

SidebarTrigger — ogni prop di Button; chiama toggleSidebar() al click.

SidebarInset — il <main> accanto alla sidebar. Ogni prop nativa di <main>.

SidebarHeader / SidebarFooter / SidebarContent — semplici <div> di layout, nessuna prop personalizzata.

SidebarGroup / SidebarGroupLabel / SidebarGroupContent — una sezione etichettata dentro SidebarContent; SidebarGroupLabel accetta asChild (boolean, default false).

SidebarGroupAction — un pulsante d'azione opzionale ancorato in alto a destra di un gruppo (ad es. un'icona "aggiungi" accanto all'etichetta del gruppo); ogni prop nativa di <button> più asChild.

SidebarMenu / SidebarMenuItem — il <ul>/<li> che avvolge ogni voce; ogni prop nativa del rispettivo elemento.

SidebarMenuButton

Più ogni prop nativa di <button>.

SidebarMenuAction — un pulsante d'azione secondario ancorato al bordo destro di una voce di menu (un trigger menu "...", un'azione rapida); ogni prop nativa di <button> più asChild, e showOnHover (boolean, default false) per tenerlo nascosto finché la riga non è in hover/focus.

SidebarMenuBadge — ogni prop nativa di <div>; un conteggio/badge finale su una voce di menu.

SidebarMenuSkeleton — placeholder di caricamento che corrisponde alla forma di un SidebarMenuItem; showIcon (boolean, default false).

SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton — un livello di elementi annidati sotto un SidebarMenuItem; SidebarMenuSubButton accetta inoltre isActive e size ("sm" \| "md", default "md").

SidebarSeparator — ogni prop di Separator; un divisore tra gruppi.

SidebarInput — ogni prop di Input, pre-stilizzato per stare dentro la sidebar (tipicamente in SidebarHeader, per un box di ricerca).

SidebarRail — una sottile striscia trascinabile al bordo della sidebar che la attiva/disattiva al click, per un'affordance desktop oltre a SidebarTrigger; ogni prop nativa di <button>.

Accessibilità

SidebarMenuButton renderizza un vero <button> (o l'elemento di asChild), raggiungibile e operabile con Tab/Invio/Spazio come qualsiasi pulsante. Quando collapsible="icon" nasconde l'etichetta testuale, passa sempre tooltip — altrimenti il pulsante compresso non ha un nome scopribile per gli utenti mouse vedenti che ci passano sopra, anche se l'aria-label/testo sottostante è comunque presente per gli screen reader tramite lo <span> nascosto.