Sidebar
Collapsible sidebar navigation with smooth open/close animation and nested sections.
Preview
Sidebar
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Documentation pages and dashboard interfaces.
Why this component matters
A well-structured sidebar provides persistent navigation context while keeping the content area focused.
Usage guidance
Use for content-heavy apps with hierarchical navigation. Default to expanded on desktop, collapsed on mobile. Highlight the active section with IO purple.
Installation
bash
npx shadcn@latest add @aceternity/sidebarUsage
example.tsxtsx
import { Sidebar } from "@/components/ui/sidebar";
export default function Example() {
return (
<Sidebar>
{/* Your content here */}
</Sidebar>
);
}Source
sidebar.tsx
components/ui/sidebar.tsx