# PageOutline

> A sticky outline of the page's sections that follows the scroll. Shown from 1100px up. Works with the window or your own scroll container.

Section: Layout. Docs: https://entrepta.vercel.app/docs/components/page-outline

## Install

```bash
npx @entrepta/cli@latest add page-outline
```

Files: `layout/page-outline.tsx`, `content/diamond.tsx`, `lib/motion.ts`.
npm packages: `motion`.
Comes with: `diamond`, `motion-lib`.

## Usage

```tsx
import { PageOutline } from "@/components/entrepta/page-outline"

<PageOutline
  file="about.md"
  items={[
    { id: "intro", label: "intro", level: 1 },
    { id: "career", label: "career", level: 2, count: 4 },
  ]}
  scrollContainer={() => document.querySelector("main")}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `{ id, label, level, count? }[]` | - | One per section id on the page |
| `file` | `string` | - | Name in the chip at the top |
| `footer` | `ReactNode` | - | Lines under the list |
| `scrollContainer` | `() => HTMLElement \| null` | - | What scrolls, when it is not the window |
| `offset` | `number` | 24 | Space above a heading after a jump |