Components (13)

Line Nav

Newmotion

Vertical navigation with a line marker that expands on hover and active state. Inspired by Devouring Details and Skiper UI.

$ pnpm dlx shadcn@latest add @byphongphan/line-nav

Requires @byphongphan in components.json

navigation

line-nav.tsx

Loading preview...

Overview

Line Nav is a vertical navigation component with an authentic ruler-tick ladder indicator inspired by chanh dai, Devouring Details and Skiper UI.

It supports both a flat Basic list and a structured Grouped hierarchy, where major category headers and active items extend prominent indicator rules with spring physics.

Installation

Install dependencies:

$ pnpm add motion clsx tailwind-merge

Requires @byphongphan in components.json

Copy and paste the component into your project:

components/line-nav.tsx

Update the import paths to match your project aliases.

Usage

import { LineNav } from "@/components/line-nav"
const items = [  { title: "Pixel preloader", href: "#pixel-preloader" },  { title: "Box loading preloader", href: "#box-loading-preloader" },  { title: "Vercel Liquid simulation", href: "#vercel-liquid" },  { title: "Ascii Simulation", href: "#ascii-simulation" },  { title: "Interactive3d Hero", href: "#interactive3d-hero" },]
export function BasicExample() {  return <LineNav items={items} activeHref="#pixel-preloader" />}

import { LineNav } from "@/components/line-nav"
const groups = [  {    title: "Crazy Hero",    href: "#crazy-hero",    items: [      { title: "Vercel Liquid simulation", href: "#vercel-liquid" },      { title: "Ascii Simulation", href: "#ascii-simulation" },    ],  },  {    title: "OG NavBars",    href: "#og-navbars",    items: [      { title: "Nike menu", href: "#nike-menu" },      { title: "Apple Navbar V001", href: "#apple-navbar-v001" },    ],  },]
export function GroupedExample() {  return <LineNav groups={groups} activeHref="#nike-menu" />}

Examples

Basic Line Nav

Flat list navigation with a continuous vertical ladder and spring-physics indicator lines:

line-nav-basic.tsx

Grouped Line Nav

Categorized sections with prominent category headers and nested sub-items:

line-nav-grouped.tsx

Props

Prop	Type	Default	Description
`items`	`LineNavItem[]`	`undefined`	Flat array of navigation items `{ title, href }`.
`groups`	`LineNavGroup[]`	`undefined`	Categorized groups `{ title, href?, items }`.
`activeHref`	`string`	`undefined`	Controlled active item href.
`defaultActiveHref`	`string`	First item href	Uncontrolled initial active item href.
`sublineCount`	`number`	`2`	Number of intermediate tick marks between entries.
`scrollActiveIntoView`	`boolean`	`true`	Scroll active item into view on mount.
`onItemClick`	`(item, event) => void`	`undefined`	Callback fired when an item or group header is clicked.
`onActiveChange`	`(href: string) => void`	`undefined`	Callback fired when the active href changes.

Line Nav

Overview

Installation

Usage

1. Basic Navigation (Flat List)

2. Grouped Navigation (Categorized)

Examples

Basic Line Nav

Grouped Line Nav

Props

Line Nav

Overview

Installation

Usage

1. Basic Navigation (Flat List)

2. Grouped Navigation (Categorized)

Examples

Basic Line Nav

Grouped Line Nav

Props

Command Palette