Line Nav

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

Installation

terminal

pnpm dlx layro-cli add @ncdai/line-nav

npx layro-cli add @ncdai/line-nav

npx layro-cli add @ncdai/line-nav

bunx layro-cli add @ncdai/line-nav

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

/**
 * This component is inspired by Devouring Details and Skiper UI.
 */

"use client"

import { memo, useEffect, useRef } from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

const lineVariants = {
  normal: { width: 24 },
  active: { width: 40 },