Scroll Spy

Layout

Navigation that highlights the active section on scroll, with table-of-contents mode.

Scroll Spy — highlights active section on scroll

Scroll the page to see the active item update. Attach item IDs to heading elements in your content.

Unificado

Instalação via CLI

$ npx kikitocn add scroll-spy

Interno:

@/lib/utils

Exemplo de uso

Scroll SpyExample.tsx

import { ScrollSpy } from "@/components/ui/cn/scroll-spy/ScrollSpy";

export function ScrollSpyExample() {
  return (
    <ScrollSpy />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`ScrollSpyItem[]`	—	Itens de navegação: { id, label, depth? }
`offset`	`number`	`80`	Offset vertical do ponto de ativação em px
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline

Carregando…