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.
The work that Manu did laid the foundation of online education that we provide today. The website he built for us is used by thousands of students every day. He took the requirements and built the ...
Jagvinder Kour
Chairperson at Golden Bells Academy