The Expandable Sidebar is a space-efficient navigation component. In its collapsed state, it acts as a minimalist icon rail. When interacted with, it expands fluidly using Framer Motion spring physics to reveal text labels, allowing users to navigate complex hierarchies without sacrificing permanent screen real estate.
Live Preview
Main Content Area
The sidebar interacts with this content. Depending on the variant, it will either push this content aside or float over it.
SidebarItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | Required | The icon displayed for this navigation item. |
label | string | Required | The text label revealed when the sidebar expands. |
href | string | — | If provided, renders the item as an anchor tag `<a>`. |
isActive | boolean | false | Highlights the item as the current active page. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ExpandableSidebar } from "@/components/creative/expandable-sidebar";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ExpandableSidebar } from "@/components/creative/expandable-sidebar";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ExpandableSidebar
variant{/* value */}
collapsedWidth{10}
expandedWidth{10}
>
<div>Content goes here</div>
</ExpandableSidebar>
</div>
);
}