Line Nav

Vertical navigation with a line marker that expands on hover and active state.

Loading…

Features

The active item's line marker expands and its label brightens to mark the current page.
The active item scrolls into view on mount, staying visible in long lists.

Want to build animations like Line Nav? I highly recommend Emil Kowalski’s animations.dev course. Take the course

Installation

pnpm dlx shadcn@latest add @ncdai/line-nav

Usage

import { LineNav } from "@/components/line-nav"

<LineNav
  activeHref="/components/code-block-command"
  items={[
    { title: "Apple Hello Effect", href: "/components/apple-hello-effect" },
    { title: "Code Block Command", href: "/components/code-block-command" },
    { title: "Copy Button", href: "/components/copy-button" },
  ]}
/>

API reference

LineNav

Prop

Type

LineNavItem

Prop

Type

Examples

Items render as plain anchors to stay framework-agnostic. For client-side navigation in Next.js (or React Router), edit the source and render the item through a router link instead.

+ import Link from "next/link"
  import { motion } from "motion/react"
 
+ const MotionLink = motion.create(Link)
 
- <motion.a
+ <MotionLink
    ref={ref}
    href={href}
    initial={false}
    animate={active ? "active" : "normal"}
    whileHover="hover"
    onClick={onClick}
  >
    {/* ... */}
- </motion.a>
+ </MotionLink>