Sidebar
Expandable sidebar that expands on hover, mobile responsive and dark mode support
Installation
Run the following command
npx shadcn@latest add @aceternity/sidebarExample
Default sidebar open
use the prop animate={false} to disable the animation
Props
SidebarProvider Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be rendered inside the provider. |
| open | boolean | false | Controls the open state of the sidebar. |
| setOpen | React.Dispatch<React.SetStateAction<boolean>> | - | Function to set the open state of the sidebar. |
Sidebar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be rendered inside the sidebar. |
| open | boolean | false | Controls the open state of the sidebar. |
| setOpen | React.Dispatch<React.SetStateAction<boolean>> | - | Function to set the open state of the sidebar. |
| animate | boolean | true | Controls the animation of the sidebar. Put false if you want to disable animation |
SidebarBody Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| props | React.ComponentProps<typeof motion.div> | - | Props to be passed to the motion.div component. |
DesktopSidebar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional class names for styling. |
| children | React.ReactNode | - | The content to be rendered inside the desktop sidebar. |
| props | React.ComponentProps<typeof motion.div> | - | Props to be passed to the motion.div component. |
MobileSidebar Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional class names for styling. |
| children | React.ReactNode | - | The content to be rendered inside the mobile sidebar. |
| props | React.ComponentProps<"div"> | - | Props to be passed to the div component. |
SidebarLink Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| link | Links | - | The link object containing label, href, and icon. |
| className | string | - | Additional class names for styling. |
| props | LinkProps | - | Props to be passed to the Link component. |
Links Interface
| Property | Type | Description |
|---|---|---|
| label | string | The text label for the link. |
| href | string | The URL the link points to. |
| icon | React.JSX.Element | React.ReactNode | The icon to be displayed alongside the link. |
SidebarContextProps Interface
| Property | Type | Description |
|---|---|---|
| open | boolean | Indicates whether the sidebar is open. |
| setOpen | React.Dispatch<React.SetStateAction<boolean>> | Function to set the open state of the sidebar. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
