Carregando…

Mini Map

Layout

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

Mini Map — navegação por seções com dots interativos

Introdução

Clique no dot para navegar até aqui.

Instalação

Clique no dot para navegar até aqui.

Configuração

Clique no dot para navegar até aqui.

Uso

Clique no dot para navegar até aqui.

API

Clique no dot para navegar até aqui.

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 />
  );
}

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

Carregando…