Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

Mox UI

From Mox UI, the free component encyclopedia

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Background

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Etymology

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

History

Early period

Modern era

Overview

Principles

Structure

Architecture

Components

Data flow

References

Installation

pnpm dlx shadcn@latest add mox/mox-ui/bounce-sidebar

Run this command from your project directory to add the component and its dependencies.

1
Install the packages
pnpm add motion clsx tailwind-merge

Add the utility file

lib/utils.ts

import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}

3
Copy and paste the code into your project
Loading source…
4
Update the import paths to match your project
Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx

import { BounceSidebar } from "@/components/ui/bounce-sidebar"    const items = [    { label: "General", heading: true },    { label: "Home", href: "/" },    { label: "About", href: "/about" },  ]    export function Demo() {    return <BounceSidebar items={items} dotColor="#FC4C01" />  }

Props

Prop	Type	Default	Description
`items*`	`Array<string \| { label: string; href?: string } \| { label: string; heading: true }>`	Default: `-`	Rows rendered as the vertical list. A plain string or an object with a label is a nav item, and href turns it into a link. Add heading: true to render a non-selectable group label the marker skips over.
`value`	`number`	Default: `-`	Active item index for controlled usage. When set, the component won't manage its own state.
`defaultValue`	`number`	Default: `0`	Initial active index for uncontrolled usage. Ignored when value is provided.
`onChange`	`(index: number) => void`	Default: `-`	Called with the new index whenever an item is selected.
`dotColor`	`string`	Default: `"#FC4C01"`	Any CSS color for the bouncing active marker (hex, rgb, hsl, var).
`className`	`string`	Default: `-`	Extra classes merged onto the root <ul> element.

Click any item to spring the bouncing marker over to it.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Free to use and modify in both personal and commercial projects.
Attribution to Mox UI is appreciated when using a component.
Please don't resell the components as your own kit.

Contact Mox UI