Sidebar
Expandable sidebar that expands on hover, mobile responsive and dark mode support
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/sidebar.jsonExample
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is a genius. He is open-minded, curious and deeply invested in the
projects he chooses to work on. He takes your vision and brings it to
life -- and is a true partner in th...
Meru Gokhale
Founder at Editorially, Editrix