Tree Nav

Navigation 100

About

A vertical navigation list with a tree-style rail and a spring-animated marker that glides to follow hover and settles on the active link.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tree Nav to your project and fits it to your theme.

Code

How Tree Nav is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { TreeNav } from "@/components/ui/tree-nav";

const ITEMS = [
  { label: "Overview", href: "#overview" },
  { label: "Installation", href: "#installation" },
  { label: "Usage", href: "#usage" },
  { label: "Theming", href: "#theming", badge: "New" },
  { label: "Accessibility", href: "#accessibility" },
  { label: "Changelog", href: "#changelog" },
];

export default function TreeNavDemo() {
  const [active, setActive] = React.useState(ITEMS[0].href);

  return (
    <div className="flex w-full justify-center py-8">
      <TreeNav
        className="w-full max-w-[240px]"
        items={ITEMS}
        activeHref={active}
        onSelect={(item, event) => {
          event.preventDefault();
          setActive(item.href);
        }}
      />
    </div>
  );
}