# Line Nav

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

Source: https://ui.cortexcn.dev/docs/cortex/line-nav

## Installation

```bash
npx shadcn@latest add @cortexcn/line-nav
```

## Usage

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

```tsx
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`.

### Next.js client-side navigation

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)`:

```tsx
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[]`](#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 |