Sidebar

A composable, themeable and customizable sidebar component for navigation.

Basic

A basic sidebar with navigation items.

Main Content

Your page content goes here.

<Sidebar>
    <SidebarHeader>
        <span class="font-semibold">Acme Inc</span>
    </SidebarHeader>
    <SidebarContent>
        <SidebarMenu>
            <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                <Icon>🏠</Icon>
                <ChildContent>Dashboard</ChildContent>
            </SidebarMenuItem>
            <SidebarMenuItem Href="/users" Title="Users">
                <Icon>👤</Icon>
                <ChildContent>Users</ChildContent>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
        <div class="text-xs text-muted-foreground">v1.0.0</div>
    </SidebarFooter>
</Sidebar>

Collapsible

A sidebar that can be collapsed to show only icons.

Main Content

Click the toggle button to collapse/expand the sidebar.

<Sidebar Collapsible="true" @bind-Collapsed="sidebarCollapsed">
    <SidebarHeader>
        <SidebarTrigger />
        @if (!sidebarCollapsed)
        {
            <span class="font-semibold">Acme Inc</span>
        }
    </SidebarHeader>
    <SidebarContent>
        <SidebarMenu>
            <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                <Icon>🏠</Icon>
                <ChildContent>Dashboard</ChildContent>
            </SidebarMenuItem>
            <SidebarMenuItem Href="/notifications" Badge="3" Title="Notifications">
                <Icon>🔔</Icon>
                <ChildContent>Notifications</ChildContent>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarContent>
</Sidebar>

@code {
    private bool sidebarCollapsed;
}

App Sidebar

Shadcn-style layout with search, groups, badges, and actions.

Main Content

SidebarInput, group labels, and trailing actions match the shadcn layout.

<Sidebar Collapsible="true" @bind-Collapsed="sidebarCollapsed">
    <SidebarHeader>
        @if (sidebarCollapsed)
        {
            <SidebarTrigger />
        }
        else
        {
            <div class="flex items-center gap-2">
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-semibold">A</div>
                <span class="font-semibold">Acme</span>
            </div>
            <SidebarTrigger />
        }
    </SidebarHeader>
    <SidebarContent>
        @if (!sidebarCollapsed)
        {
            <SidebarInput Placeholder="Search..." />
            <SidebarSeparator />
        }
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true" Badge="New" Title="Dashboard">
                    <Icon>🏠</Icon>
                    <ChildContent>Dashboard</ChildContent>
                </SidebarMenuItem>
                <SidebarMenuItem Href="/teams" Title="Teams">
                    <Icon>👥</Icon>
                    <ChildContent>Teams</ChildContent>
                    <Action>
                        <span class="text-xs text-muted-foreground">⌘K</span>
                    </Action>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarGroupContent>
    </SidebarContent>
    <SidebarFooter>
        <div class="text-xs text-muted-foreground">v1.0.0</div>
    </SidebarFooter>
</Sidebar>

With Groups

Organize menu items into groups with labels.

Main Content

<Sidebar>
    <SidebarHeader>
        <span class="font-semibold">My App</span>
    </SidebarHeader>
    <SidebarContent>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                    Dashboard
                </SidebarMenuItem>
                <SidebarMenuItem Href="/analytics" Title="Analytics">
                    Analytics
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarGroupContent>
        
        <SidebarGroupLabel>Settings</SidebarGroupLabel>
        <SidebarGroupContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/profile" Title="Profile">
                    Profile
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarGroupContent>
    </SidebarContent>
</Sidebar>

Custom Widths

Control the expanded and collapsed widths.

Main Content

Use ExpandedWidth and CollapsedWidth to tune layout.

<Sidebar Collapsible="true"
         ExpandedWidth="18rem"
         CollapsedWidth="4rem"
         @bind-Collapsed="sidebarCollapsed">
    <SidebarHeader>
        <SidebarTrigger />
        @if (!sidebarCollapsed)
        {
            <span class="font-semibold">Wide Sidebar</span>
        }
    </SidebarHeader>
    <SidebarContent>
        <SidebarMenu>
            <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                <Icon>🏠</Icon>
                <ChildContent>Dashboard</ChildContent>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarContent>
</Sidebar>

@code {
    private bool sidebarCollapsed;
}