Hesoyam

Sidebar

App shell navigation built from SidebarProvider, Sidebar, and composable sub-parts.

Parts

Wrap the app in SidebarProvider. Sidebar is the rail. SidebarInset is the main column. SidebarTrigger toggles desktop collapse and the mobile sheet.

Acme

Project

        

          1
          
          <SidebarProvider class="min-h-0 h-[240px] max-w-sm overflow-hidden rounded-[8px] border border-[var(--ds-gray-alpha-400)]">
        

          2
          
            <Sidebar collapsible="none">
        

          3
          
              <SidebarHeader>Acme</SidebarHeader>
        

          4
          
              <SidebarContent>
        

          5
          
                <SidebarGroup>
        

          6
          
                  <SidebarGroupLabel>Project</SidebarGroupLabel>
        

          7
          
                  <SidebarGroupContent>
        

          8
          
                    <SidebarMenu>
        

          9
          
                      <SidebarMenuItem>
        

          10
          
                        <SidebarMenuButton>
        

          11
          
                          Overview
        

          12
          
                        </SidebarMenuButton>
        

          13
          
                      </SidebarMenuItem>
        

          14
          
                    </SidebarMenu>
        

          15
          
                  </SidebarGroupContent>
        

          16
          
                </SidebarGroup>
        

          17
          
              </SidebarContent>
        

          18
          
            </Sidebar>
        

          19
          
          </SidebarProvider>

Props

  • side — left (default) or right.
  • variant — sidebar, floating, or inset.
  • collapsible — offcanvas (default), icon, or none.
  • Provider: default-open / v-model:open. Cookie remembers the desktop state. ⌘B / Ctrl+B toggles.
  • This preview uses collapsible="none" so the rail stays in flow and does not pin to the viewport.

Best practices

  • One SidebarProvider per shell. Nested providers fight over the same cookie and shortcut.
  • Collapsed icon mode needs a tooltip on SidebarMenuButton — the label is clipped.
  • Do not restyle the rail with a new width scale. Width tokens live on the provider.
  • Mobile already becomes a Sheet. Do not wrap Sidebar in another drawer.