Outline

In-page outline navigation. Pass a flat items array (or Outline.Item children) and highlight via controlled activeId or automatic scroll-spy.

Examples

Default

Flat section links with a controlled active item (scroll-spy off).

import { Outline } from '@var-ui/react';

<Outline
  activeId="intro"
  scrollSpy={false}
  items={[
    { id: 'intro', text: 'Intro', level: 2 },
    { id: 'examples', text: 'Examples', level: 2 },
  ]}
/>

Nested items

Use level: 3 for subsections — nested links indent under their parent heading.

import { Outline } from '@var-ui/react';

<Outline
  activeId="examples"
  scrollSpy={false}
  items={[
    { id: 'intro', text: 'Intro', level: 2 },
    { id: 'examples', text: 'Examples', level: 2 },
    { id: 'default', text: 'Default', level: 3 },
    { id: 'nested', text: 'Nested', level: 3 },
  ]}
/>

Props

Accessibility

The root is a nav landmark named by title (default “On this page”). Links target #id — keep matching heading ids in the page. When scroll-spy is on, the active link updates from an IntersectionObserver; pass activeId to control highlighting yourself.