Scroll Spy
A utility that automatically highlights navigation items based on scroll position.
Sidebar Layout (Main)
Introduction
Sidebar layout uses orientation="vertical".
Installation
The indicator uses indicator="before".
Configuration
Customize offsets and behavior easily.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/scroll-spy.jsonOr manually:
npm install reka-ui @vueuse/core clsx tailwind-mergeMore Examples
Navbar Layout (Horizontal)
Nav on top, content below. Use orientation="horizontal" and indicator-position="after" for the bottom line.
Logo
Concept
Design
Code
Table of Contents (Right Side)
Nav on the right. Use indicator-position="after" to show the line on the right edge.
Overview
Features
Pricing
Props
ScrollSpyNav
| Prop | Type | Default | Description |
|---|---|---|---|
| indicator | boolean | false | Enables the moving active line indicator. |
| indicatorPosition | 'before' | 'after' | 'before' | Controls line position relative to the link. Vertical: before (Left), after (Right).Horizontal: before (Top), after (Bottom). |
ScrollSpy (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
| container | HTMLElement | null | window | Crucial: A reference to the element that has overflow-y: auto. If omitted, it tracks the window scroll. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Controls the flex direction.vertical = Side-by-side (flex-row).horizontal = Stacked (flex-col). |
| offset | number | 0 | Offset from the top when scrolling/detecting. |