Animated Sidebar

Icon rail that expands on hover or focus and turns into a drawer on narrow screens.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-sidebar.json

Adds components/velora/animated-sidebar.tsx.

A pinned-capable rail beside a dashboard with stats, a chart and recent orders.

Search orders…

Revenue

$48,210

+12.4%

Orders

1,284

+4.1%

Customers

912

+8.9%

Sales, last 12 weeks

Recent orders
Order	Customer	Total	Status
#3021	Lena Park	$240.00	Paid
#3020	Omar Haddad	$89.50	Pending
#3019	Iris Chen	$412.10	Paid

Below a 42rem container width the rail becomes a top bar with a drawer.

Prop	Type	Default
`pinned` Controlled pinned-open state of the desktop rail	`boolean`	`—`
`defaultPinned` Initial pinned state when uncontrolled	`boolean`	`false`
`onPinnedChange` Called when the pin toggle is pressed	`(pinned: boolean) => void`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Prop	Type	Default
`logo` Icon-sized mark, always visible	`React.ReactNode`	`—`
`title` Product name next to the logo; fades in with the labels	`React.ReactNode`	`—`
`footer` Links pinned to the bottom (e.g. settings or the account)	`React.ReactNode`	`—`
`label` Accessible name of the navigation landmark	`string`	`"Main"`
`pinnable` Show the "Keep expanded" toggle at the bottom of the rail	`boolean`	`true`
`className` Classes for the navigation panel (rail and drawer)	`string`	`—`
`children*` SidebarLink elements	`React.ReactNode`	`—`

Prop	Type	Default
`icon*` Icon shown in both collapsed and expanded states	`React.ReactNode`	`—`
`label*` Link text; stays the accessible name while the rail is collapsed	`string`	`—`
`active` Marks the current page (sets aria-current="page")	`boolean`	`false`

Also accepts every <a> attribute, forwarded to the root element.

Reduced motion: The rail snaps between its collapsed and expanded widths, labels appear without fading and the drawer opens without sliding.
Keyboard: Links are native anchors; tabbing into the rail expands it. In the narrow layout the menu button opens a modal drawer that keeps Tab inside, closes on Escape or a backdrop click, and returns focus to the button.
Screen readers: A nav landmark (label prop) of links with aria-current on the active page; collapsed labels are only faded, so every link keeps its name, and the menu button reports aria-expanded.