Sidebar
A composable, themeable and customizable sidebar component. Created by Shadcn, animated by Animate UI, updated by malinskibeniamin.
Made by malinskibeniaminPowered by
Installation
A sidebar that collapses to icons.
When to use
Sidebars provide persistent navigation and complementary content. Use this decision tree:
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
Loading skeleton
SidebarMenuSkeleton renders random per-row widths by default. Pass uniform for full-width rows that match evenly sized nav items.
Wide content in the inset
SidebarInset sets min-w-0 so it can shrink below its content's intrinsic width. Without it, a flex item's implicit min-width: auto lets one wide descendant — a long code line, a wide table — widen the whole shell and scroll the document horizontally. The wide block still needs its own overflow-x-auto, as the pre here has: that is what gives the overflow somewhere to go instead of spilling out of the inset.
With a fixed banner
Pass bannerHeight on SidebarProvider so the sidebar container and inset are offset below a fixed top banner. The mobile sheet is intentionally not offset — it slides over the banner. The example also uses SidebarMenuBadge variant="secondary" for the emphasis badges next to nav items.
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.
Recent changes
- v1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
- v1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- v1.0.0Post-Base-UI polish. Public API unchanged.#116
- v1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- v0.3.1## 🚧 Updated#112