React Sidebar Component Examples

The simplest Sidebar is a header with branding above a content area of items. Drop Sidebar.Header and Sidebar.Content directly inside the root, then render a flat list of Sidebar.Item children with an icon prop and a label as children. The default variant draws a one-pixel right border, the default side is left, and the default width is 240 pixels until something flips the collapsed state.

Icons follow the Drivn icon-as-component convention: pass the lucide component reference (icon={Home}), not a JSX element. The component renders the icon at w-4 h-4 so every item lines up vertically. Mark the current page with active, which swaps the item background to the bg-accent token and bumps the label to font-medium. The wrapper around the Sidebar uses flex min-h-svh so the rail and the main column sit side by side and fill the viewport.

Pass collapsed and onCollapsedChange to drive the rail from a parent. The Sidebar animates between w-[240px] and w-[60px] through a Tailwind transition-[width] duration-200, and every Sidebar.Item reads the same collapsed context to hide its label and badge while keeping the icon. Drop a Sidebar.CollapseButton inside the header to toggle from inside the rail, or wire a button in the main column header to flip the same state from outside.

The example below pairs a controlled Sidebar with a top header that holds an external PanelLeft button. The Sidebar.CollapseButton is the in-rail twin — same icon, same context, same behaviour. Because the state is controlled, you can persist it wherever your app stores user preferences: a localStorage write inside onCollapsedChange, a server action that updates a user profile, or a cookie set by a separate handler. The component does not bake any persistence in.

Wrap items in Sidebar.Group to add a heading row and group-level collapse. The heading prop draws a small uppercase label, and by default the heading is a <button> that toggles the group open and closed. The chevron icon in the heading rotates 180 degrees when open, and the panel below animates through CSS Grid template rows — grid-template-rows: 1fr when open, 0fr when closed — with overflow-hidden on the inner content so children clip during the transition.

Pass defaultOpen={false} to start a group collapsed, or collapsible={false} to render the heading as a static <span> instead of a toggle. Drop a Sidebar.Separator between groups for an extra visual break when the headings are not enough. When the entire rail is collapsed, group headings hide and panels snap fully open so the collapsed-icon column is never half-clipped.

Every Sidebar.Item accepts an icon prop (a lucide component reference or any element matching the ComponentType<{ className?: string }> shape) and a badge prop (a string or a number). The badge renders on the right with a bg-primary/10 text-primary pill style — that is the verbatim class from the registry — and uses ml-auto to push to the trailing edge of the row. Useful for unread counts, notification dots, or labels like "new".

When the rail is collapsed, the label and the badge hide and only the icon shows. To preserve the badge as a small dot on the icon itself when collapsed, render a custom badge through the children of an Sidebar.Item with absolute-positioned spans — the file is yours after install, so adding a collapsed-state badge slot is a small edit. The default behaviour suits most dashboards: badges visible when expanded, icon-only when collapsed.

Pass variant="floating" to render the Sidebar as a detached card with a rounded border, a shadow, and an 8-pixel margin around it (border rounded-xl shadow-lg m-2 h-[calc(100%-16px)]). Useful for marketing app shells where the rail reads as a panel rather than a flush wall. Pair it with a bg-background main column for the strongest contrast.

Pass side="right" to flip the Sidebar to the trailing edge. The component renders the same content; only the border side differs in the default variant. The example below combines both — a floating right-side rail used as a context panel beside a primary content column. The wrapper still uses flex min-h-svh and lets the main column sit on the left with flex-1. For a more substantial right-side panel with stronger separation, drop a Separator between the columns.

Every example above relies on the same width-transition trick at the root. The styles object below is reproduced verbatim from packages/drivn/src/registry/components/sidebar.ts. The base key holds the flex flex-col h-full column layout plus transition-[width] duration-200 ease-in-out so the animation runs whenever the width class swaps. The variants object selects border-r for the default flush rail and the floating card for the alternative variant.

The width object holds the two width classes — w-[240px] and w-[60px] — that the SidebarRoot function reads through the collapsed state. Whenever you reach for a Sidebar feature that does not have a built-in prop, this styles object is where you change it: bump the expanded width to 280 pixels, swap the rounded corners on floating, or change the border colour to a different token. The file lives in your project after installation, so any edit is a one-line change.