advanced

Sidebar

A composable, themeable and customizable sidebar component.

Preview

A preview of the Sidebar component with interactive controls.

Preview Code
Interactive

Installation

Add the Sidebar component to your project.

Bash
ng g @ng-cn/core:c sidebar

Usage

Import and use the Sidebar component in your Angular application.

Template TypeScript
template.html
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <span class="font-semibold">Logo</span>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <lucide-icon name="home" class="h-4 w-4" />
              <span>Dashboard</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <lucide-icon name="inbox" class="h-4 w-4" />
              <span>Inbox</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <lucide-icon name="settings" class="h-4 w-4" />
              <span>Settings</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <span class="text-sm text-muted-foreground">Footer</span>
    </SidebarFooter>
  </Sidebar>
  <main class="flex-1 p-4">
    <SidebarTrigger>
      <Button variant="outline" size="icon">
        <lucide-icon name="panel-left" class="h-4 w-4" />
      </Button>
    </SidebarTrigger>
    <div class="mt-4">Main content area</div>
  </main>
</SidebarProvider>

Examples

Explore different variations and use cases for the Sidebar component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
side 'left' | 'right' 'left' The side the sidebar appears on.
collapsible 'offcanvas' | 'icon' | 'none' 'offcanvas' The collapsible behavior.