Layout

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.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add page-outline

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

page-outline.tsx

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