Sidebar
A composable, themeable and customizable sidebar component. Created by Shadcn, animated by Animate UI, updated by malinskibeniamin.
Made by malinskibeniaminPowered by
A sidebar that collapses to icons.
When to use
Sidebars provide persistent navigation and complementary content. Use this decision tree:
Installation
Usage
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Label 1</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Label 2</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
<SidebarInset>
<SidebarTrigger />
{...}
</SidebarInset>
</SidebarProvider>Props
Animate UI props
Sidebar
Prop
Type
Examples
Cloud UI
An example sidebar representation for Cloud UI.
Cloud UI (With Billing credits)
An example sidebar representation for Cloud UI with billing credits for a free trial.
Cloud UI (With Billing expired)
An example sidebar representation for Cloud UI with billing free trial expired.
Cloud UI (Cluster)
An example sidebar representation for Cloud UI within a cluster.
Cloud UI (Serverless)
An example sidebar representation for Cloud UI within a serverless cluster.
Console UI
An example sidebar representation for Console UI.
Console UI (Self-hosted)
An example sidebar representation for self-hosted Console UI.
Admin UI
An example sidebar representation for Admin UI.
Credits
- We take our inspiration from Shadcn UI for the sidebar component and styling.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.