Line Nav | Cortexcn

Installation

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

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

Usage

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

const items = [
  { title: "Introduction", href: "#introduction" },
  { title: "Installation", href: "#installation" },
  { title: "Usage", href: "#usage" },
];

<LineNav items={items} activeHref="#introduction" />;

Examples

Controlled active item

Track the active item in state and update it from onItemClick.

"use client";

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

const items = [
  { title: "Introduction", href: "#introduction" },
  { title: "Installation", href: "#installation" },
  { title: "Usage", href: "#usage" },
  { title: "Examples", href: "#examples" },
  { title: "API Reference", href: "#api-reference" },
];

export function DocsNav() {
  const [activeHref, setActiveHref] = useState("#introduction");

  return (
    <LineNav
      items={items}
      activeHref={activeHref}
      scrollActiveIntoView={false}
      onItemClick={(item) => setActiveHref(item.href)}
    />
  );
}

"use client";import { useState } from "react";import { LineNav } from "@/components/line-nav";const items = [  { title: "Introduction", href: "#introduction" },  { title: "Installation", href: "#installation" },  { title: "Usage", href: "#usage" },  { title: "Examples", href: "#examples" },  { title: "API Reference", href: "#api-reference" },];export function DocsNav() {  const [activeHref, setActiveHref] = useState("#introduction");  return (    <LineNav      items={items}      activeHref={activeHref}      scrollActiveIntoView={false}      onItemClick={(item) => setActiveHref(item.href)}    />  );}

Items render as plain anchors so the component works in any framework. For client-side navigation in Next.js, open components/line-nav.tsx and swap motion.a for motion.create(Link):

import Link from "next/link";

const MotionLink = motion.create(Link);

// Inside LineNavItem, render <MotionLink ...> instead of <motion.a ...>

Props

LineNav

Prop	Type	Default	Description
`items`	`LineNavItem[]`	required	Navigation items, top to bottom
`activeHref`	`string`	-	Href of the active item
`scrollActiveIntoView`	`boolean`	`true`	Scroll the active item into view on mount
`onItemClick`	`(item: LineNavItem, event: MouseEvent<HTMLAnchorElement>) => void`	-	Called when an item is clicked
`className`	`string`	-	Extra classes for the `nav` element

LineNavItem

Property	Type	Description
`title`	`string`	Label shown next to the line
`href`	`string`	Link target, also used as the key