Nav Link

Navigation

About

A navigation link that marks the current page using aria-current and a data-active attribute, with asChild support for router link components.

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

Code

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

Usage.tsx

import { NavLink } from "@/components/ui/nav-link";

export default function NavLinkDemo() {
  return (
    <nav aria-label="Ship" className="flex flex-wrap gap-1">
      <NavLink active href="#nav-charts">
        Charts
      </NavLink>
      <NavLink href="#nav-crew">Crew</NavLink>
      <NavLink href="#nav-cargo">Cargo</NavLink>
      <NavLink href="#nav-log">Log</NavLink>
    </nav>
  );
}