@kit-ng-ui/anchor

Scroll-spy link list. Click smooth-scrolls to the target section; the link matching the current scroll position is highlighted automatically.

Install

pnpm add @kit-ng-ui/anchor

@use '@kit-ng-ui/anchor/styles' as anchor;

Usage

const sections = [
  { href: '#intro', title: 'Intro' },
  {
    href: '#usage',
    title: 'Usage',
    children: [
      { href: '#install', title: 'Install' },
      { href: '#config', title: 'Config' },
    ],
  },
];

<kit-anchor [items]="sections" [offsetTop]="80"></kit-anchor>

Scoped to a scrolling ancestor

<div #pane class="docs-pane">…</div>
<kit-anchor [items]="sections" [container]="pane"></kit-anchor>

API

| Input | Type | Default | Description | | ------------ | ----------------------------------- | ------------ | ------------------------------------------------- | | items | ReadonlyArray<KitAnchorLink> | [] | Link list (with optional one-level children). | | offsetTop | number | 0 | Pixels above the scroll line that count as active. | | container | HTMLElement \| null | null | Override the window scroller. | | direction | 'vertical' \| 'horizontal' | 'vertical' | Vertical (rail) or horizontal (tabs) layout. |

| Output | Payload | Description | | ------- | -------- | ---------------------------------------------------- | | change | string | Fires with the new active href when the spy moves. |