# Scroll Spy Tabs

Sticky tabs that track the sections of one long page. The indicator follows as you scroll and tapping a tab jumps to its section, in underline, pill, numbered or side-rail styles.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/scroll-spy-tabs
```

## Import

```tsx
import { ScrollSpyTabs } from "@/components/ui/scroll-spy-tabs/scroll-spy-tabs";
```

## Variants

- `aisles` — Grocery aisle rail: `npx @lumioui/cli add pro/scroll-spy-tabs-aisles`
- `help-center` — Help centre chapters: `npx @lumioui/cli add pro/scroll-spy-tabs-help-center`
- `product` — Product page sections: `npx @lumioui/cli add pro/scroll-spy-tabs-product`
- `restaurant` — Restaurant menu: `npx @lumioui/cli add pro/scroll-spy-tabs-restaurant`

## Props

### ScrollSpyTabsSection

| Prop | Type | Notes |
| --- | --- | --- |
| `id` | `string` | Stable id — reported by onActiveChange. |
| `title` | `string` | Tab label, and the default section heading. |
| `count?` | `number | string` | Muted count after the tab label ("Reviews 128"). |
| `hideTitle?` | `boolean` | Hide the built-in heading (render your own inside). |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ScrollSpyTabs

| Prop | Type | Notes |
| --- | --- | --- |
| `header?` | `React.ReactNode` | Scrolls away above the sticky bar (hero, store header). |
| `footer?` | `React.ReactNode` | After the last section. |
| `variant?` | `"underline" | "pill"` | "underline" — a line under the active tab. "pill" — a filled capsule. Default "underline". |
| `layout?` | `"top" | "side"` | "top" — sticky strip. "side" — vertical rail beside the content. Default "top". |
| `fill?` | `boolean` | Tabs share the bar width equally (2–4 sections). |
| `numbered?` | `boolean` | Prefix tabs with chapter numbers (01, 02…). |
| `glide?` | `number` | Glide distance before a heading reaches the bar. Default 72. |
| `railWidth?` | `number` | Rail width for layout="side". Default 120. |
| `onActiveChange?` | `(id: string, index: number) => void` | Fires when the active section changes (scroll or tap). |
| `scrollY?` | `SharedValue<number>` | Mirror of the content scroll offset, for headers that react to it. |
| `className?` | `string` | — |
| `barClassName?` | `string` | Classes for the sticky bar / rail surface. |
| `contentClassName?` | `string` | Classes for the sections wrapper (padding). |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/scroll-spy-tabs