# TickNav

> A navigation list on a ruler of tick marks: every line the pointer crosses plucks like a string, neighbouring lines and ticks stretch and light up on springs, and an optional preview card follows the pointer.

- Package: `fancy-ui-vue` (Vue 3.5+ + Tailwind CSS v4)
- Category: Navigation
- Tags: nav, sidebar, ruler, ticks, proximity, spring, preview, hover
- Types: `TickNavProps`, `TickNavItem`
- Docs: https://fancy-ui.rama.app/docs/components/tick-nav
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/vue/src/components/tick-nav

## Import

```vue
<script setup lang="ts">
import { TickNav } from 'fancy-ui-vue';
</script>
```

Setup (once per project): `npm install fancy-ui-vue`, then put these lines in your main CSS file (the stylesheet imports go right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-vue/tailwind.css";
@import "fancy-ui-vue/styles.css";
```

Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in a Vue template; when one differs from the Svelte name, the Svelte name follows in parentheses. Snippets become named slots (`#default` is the default snippet), a prop the Vue port declares as a model is a `v-model:<name>` (except `ref`, exposed via `defineExpose({ ref })`: put a template ref on the component and read `.ref`) and callbacks are listeners (`onclick` is `@click`). Every component sets `inheritAttrs: false`: `class` is a declared prop, merged where the Svelte component applies it (not always the root element), and only when the props table below lists it; other attributes do not fall through unless the package README lists the component as forwarding native attributes. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/vue#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `TickNavItem[]` | — | The rows, top to bottom: `{ id, label, href?, badge?, disabled? }`. A row with `href` renders as a link, otherwise as a button. |
| `v-model:value` (Svelte `value`) | `string` | — | Id of the current item. Bindable. |
| `@value-change` (Svelte `onValueChange`) | `(id: string) => void` | — | Called with the id of an item that is activated and not already current. |
| `#preview` (Svelte `preview`) | `Snippet<[TickNavItem]>` | — | Content of the card that follows the pointer while a row is hovered (or sits beside a keyboard-focused row). Leave it out and no card is rendered. |
| `reach` | `number` | `4` | Rows over which the neighbours of the hovered row still react. |
| `minorTicks` | `number` | `2` | Ruler ticks drawn between two rows. |
| `variant` | `"default" \| "neon"` | `"default"` | Neon turns the lines into glowing tubes: proximity raises the glow, a beam of light rides every pluck, labels glow on hover, and the current line breathes. Made for dark surfaces. |
| `hdr` | `boolean` | `true` | Neon only: on a display that reports HDR, draws the light in a WebGPU canvas with extended tone mapping, so the tubes reach SDR white and the beam peaks around 1000 nits. Elsewhere the CSS glow carries the effect alone. |
| `ariaLabel` | `string` | `"Navigation"` | Accessible name of the nav landmark. |
| `sound` | `boolean` | `false` | Plays a cue for every line a mouse or pen plucks (hover for an item, a softer tick for a ruler tick), once the user has enabled sound |
| `class` | `string` | — | Additional CSS classes on the nav. |

## Example

No Vue example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/tick-nav.md.