Docs·Bounce Sidebar

Bounce Sidebar

A compact sidebar whose active indicator springs between navigation items with a subtle sideways bounce.

Installation

$pnpm dlx shadcn@latest add @spiderui/bounce-sidebar

Usage

API Reference

PropTypeDefault
itemsNavigation items with id, label, optional href, icon, and disabled state.
BounceSidebarItem[]—
valueControlled selected item id.
string—
defaultValueInitial selected item id when uncontrolled.
string—
onValueChangeCalled after the selected item changes.
(value: string) => void—
itemClassNameAdditional classes shared by every navigation item.
string—
indicatorClassNameAdditional classes for the animated indicator.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { BounceSidebar } from "@/components/ui/bounce-sidebar"
const items = [
  { id: "overview", label: "Overview" },
  { id: "components", label: "Components" },
  { id: "motion", label: "Motion" },
]

export default function Page() {
  return <BounceSidebar items={items} defaultValue="overview" />
}