Outline

Anatomy

<Outline.Root>
	<Outline.Tree>
		{#snippet empty()}No bookmarks{/snippet}
	</Outline.Tree>
</Outline.Root>

<Outline.Root>
	<Outline.Tree>
		{#snippet empty()}No bookmarks{/snippet}
	</Outline.Tree>
</Outline.Root>

Usage

Items get data-active (the section being read) and data-contains-active; outline.activePath gives a breadcrumb. Clicking navigates with history, so Back returns. For papers without bookmarks, use Toc, which falls back to headings found in the text.

API reference

`Outline.Root`

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`expandDepth`	`number`	`1`
`outline` bindable	`OutlineState`	—

Snippet prop	Type
`outline`	`OutlineState`

Data attributes data-pdf-outlinedata-status

`Outline.Tree`

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`item` Custom row content.	`Snippet<[OutlineItemSnippetProps]>`	—
`empty` Shown when the PDF has no outline.	`Snippet`	—

Data attributes data-depthdata-pdf-outline-groupdata-pdf-outline-rowdata-pdf-outline-spacerdata-pdf-outline-toggledata-pdf-outline-treedata-state

`Outline.Item`

Renders a <button> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`item` required	`OutlineItem`	—

Snippet prop	Type
`item`	`OutlineItem`
`depth`	`number`
`active`	`boolean`
`containsActive` The active item is inside this one.	`boolean`
`expanded`	`boolean`
`hasChildren`	`boolean`
`toggle`	`() => void`

Data attributes data-activedata-contains-activedata-depthdata-disableddata-pdf-outline-item