Mini Map

Layout

Fixed page mini-map with section dots and active highlight for long-scrolling pages.

Instalação via CLI

$ npx kikitocn add mini-map

Interno:

@/lib/utils

Exemplo de uso

Mini MapExample.tsx

import { MiniMap } from "@/components/ui/cn/mini-map/MiniMap";

export function MiniMapExample() {
  return (
    <MiniMap position="left" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`sections*`	`MiniMapSection[]`	—	Seções: { id, label }
`activeId`	`string`	`undefined`	ID da seção ativa (controlled)
`onNavigate`	`(id: string) => void`	`undefined`	Callback ao clicar em uma seção
`position`	`'left' \| 'right'`	`'right'`	Lado da tela onde o mini-map aparece
`className`	`string`	—	Classes extras pro nav raiz
`style`	`CSSProperties`	—	Estilos inline pro nav raiz

Carregando…