Sidebar Demo

Starwind UI Sidebar Component

A composable, themeable and customizable sidebar component built for Astro. This demo showcases the collapsible="icon" mode.

Features

Collapsible modes: icon, offcanvas, or none
Side positioning: left or right
Variants: sidebar, floating, or inset
Keyboard shortcut: Press Ctrl + B to toggle
Cookie persistence: Remembers sidebar state across sessions
Mobile support: Opens as a sheet on mobile devices

Usage

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarHeader>...</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Menu</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="#">
                <Icon />
                <span>Label</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>...</SidebarFooter>
    <SidebarRail />
  </Sidebar>
  
  <SidebarInset>
    <main>Your content here</main>
  </SidebarInset>
</SidebarProvider>

Try It

← Back to Components