Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

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.json

Example

Default sidebar open

use the prop animate={false} to disable the animation

Props

SidebarProvider Props

Prop NameTypeDefaultDescription
childrenReact.ReactNode-The content to be rendered inside the provider.
openbooleanfalseControls the open state of the sidebar.
setOpenReact.Dispatch<React.SetStateAction<boolean>>-Function to set the open state of the sidebar.
Prop NameTypeDefaultDescription
childrenReact.ReactNode-The content to be rendered inside the sidebar.
openbooleanfalseControls the open state of the sidebar.
setOpenReact.Dispatch<React.SetStateAction<boolean>>-Function to set the open state of the sidebar.
animatebooleantrueControls the animation of the sidebar. Put false if you want to disable animation

SidebarBody Props

Prop NameTypeDefaultDescription
propsReact.ComponentProps<typeof motion.div>-Props to be passed to the motion.div component.

DesktopSidebar Props

Prop NameTypeDefaultDescription
classNamestring-Additional class names for styling.
childrenReact.ReactNode-The content to be rendered inside the desktop sidebar.
propsReact.ComponentProps<typeof motion.div>-Props to be passed to the motion.div component.

MobileSidebar Props

Prop NameTypeDefaultDescription
classNamestring-Additional class names for styling.
childrenReact.ReactNode-The content to be rendered inside the mobile sidebar.
propsReact.ComponentProps<"div">-Props to be passed to the div component.
Prop NameTypeDefaultDescription
linkLinks-The link object containing label, href, and icon.
classNamestring-Additional class names for styling.
propsLinkProps-Props to be passed to the Link component.
PropertyTypeDescription
labelstringThe text label for the link.
hrefstringThe URL the link points to.
iconReact.JSX.Element | React.ReactNodeThe icon to be displayed alongside the link.

SidebarContextProps Interface

PropertyTypeDescription
openbooleanIndicates whether the sidebar is open.
setOpenReact.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.

Go Pro
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

A product by Aceternity
Building in public at @mannupaaji