<SidebarProvider>
<Sidebar>
<SidebarHeader>...</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton Href="#" IsActive="true">
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>...</SidebarFooter>
</Sidebar>
<SidebarInset>
<header class="flex h-12 items-center gap-2 border px-3">
<SidebarTrigger />
</header>
</SidebarInset>
</SidebarProvider>Installation
Install the sidebar component using the command or manual steps.
blazor-shadcn add sidebarStructure
A sidebar is composed from SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, groups, and menu primitives.
Usage
@using BlazorShadcn.Components.UI<SidebarProvider>
<Sidebar>
<SidebarHeader />
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton Href="#" IsActive="true">
<span>Dashboard</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter />
</Sidebar>
<SidebarInset>
<header class="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
</header>
<main class="p-4">
@Body
</main>
</SidebarInset>
</SidebarProvider>Examples
Basic
A collapsible sidebar that shrinks to icons.
<SidebarProvider>
<Sidebar Collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton Href="#" IsActive="true">
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<SidebarTrigger />
</SidebarInset>
</SidebarProvider>Floating
Use Variant="floating" for a detached card-like sidebar.
<SidebarProvider>
<Sidebar Variant="floating" Collapsible="icon">
...
</Sidebar>
<SidebarInset>
...
</SidebarInset>
</SidebarProvider>Inset
Inset layouts wrap the content area with SidebarInset.
<SidebarProvider>
<Sidebar Variant="inset" Collapsible="icon">
...
</Sidebar>
<SidebarInset>
...
</SidebarInset>
</SidebarProvider>Right Side
Set Side="right" to anchor the sidebar to the opposite edge.
<SidebarProvider>
<Sidebar Side="right">
...
</Sidebar>
<SidebarInset>
...
</SidebarInset>
</SidebarProvider>API Reference
This port follows the core shadcn composition model and supports the main layout primitives required for common application sidebars.