Arc Sidebar

A sectioned nav whose active marker arcs between rows, shoves the label aside on landing and crossfades into each section's ink. Works as a static rail or a drawer.

Credit: Calamansi UI (MIT)

Type scale

Pick a row and the marker arcs to it, arriving in the colour of the section it lands in. The drawer is the same panel again, over the page.

Open

marker

fade

navLabel

Installation

npx shadcn@latest add @glint-ui/arc-sidebar

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/arc-sidebar.json

Usage

import { ArcSidebar } from "@/components/ui/arc-sidebar";

<ArcSidebar
  sections={[
    { label: "Getting started", items: [{ label: "Overview" }, { label: "Install" }] },
    { label: "Foundations", color: "#7aa2ff", items: [{ label: "Colour" }, { label: "Spacing" }] },
  ]}
  marker="pip"
/>

Props

Prop	Type	Default	Description
marker	"dot" \| "pip" \| "bar" \| "glow"	"dot"	Marker shape.
fade	boolean	true	Fade the list at both edges (adds 3rem of padding with it).
navLabel	string	"Sidebar"	Accessible name of the nav, and the drawer's title.
sections	ReactNode	—	`{ label?, color?, items: { label, href?, icon?, badge?, disabled? }[] }[]`.
markerColor	string	"var(--primary, #b4e84c)"	Marker colour, and the fallback for sections without `color`.
activeHref	string	—	Mark the row whose `href` matches (route-driven).
value	number	—	Active row as a flat index (controlled).
defaultValue	number	0	Active row on mount when uncontrolled.
onChange	ReactNode	—	`(index, item) => void`, fired on selection.
onNavigate	ReactNode	—	`(item) => void`, fired on every selection.
header	ReactNode	—	Pinned above the list.
footer	ReactNode	—	Pinned below the list.
variant	"rail" \| "drawer"	"rail"	Static panel or sliding overlay.
position	"fixed" \| "absolute"	"fixed"	Drawer only: cover the viewport (and lock scroll) or the nearest positioned ancestor.
open	boolean	false	Drawer only: whether it is showing.
onOpenChange	ReactNode	—	Drawer only: `(open) => void` on Escape, scrim or close button.
className	string	—	Extra classes for the root element.