# `PhiaUi.Components.Toc`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/toc.ex#L1)

Sticky table of contents with scroll-spy via IntersectionObserver.

Uses the `PhiaToc` hook from `priv/templates/js/hooks/toc.js`.
The hook watches heading elements in the page and marks the active TOC link
with `data-toc-active` as the user scrolls.

Two components:

- `toc/1` — the sticky nav container
- `toc_item/1` — an individual TOC link with depth indent and active state

# `toc`

Renders a sticky table of contents with IntersectionObserver scroll-spy.

Place heading elements in the article with matching `id` attributes.
The PhiaToc hook marks the visible heading's corresponding `toc_item` with
`data-toc-active`, which triggers `data-[toc-active]:text-primary` styling.

## Attributes

* `id` (`:string`) (required) - Required for phx-hook.
* `title` (`:string`) - Defaults to `"On this page"`.
* `sticky` (`:boolean`) - Adds sticky top-6 positioning. Defaults to `true`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - toc_item/1 children.

# `toc_item`

Renders an individual table of contents link.

The hook sets `data-toc-active` on the link corresponding to the currently
visible heading, triggering the `data-[toc-active]:text-primary` style.

## Attributes

* `id` (`:string`) (required) - The heading element ID to scroll to (e.g. 'introduction').
* `depth` (`:integer`) - Nesting depth: 1=H2, 2=H3, 3=H4. Defaults to `1`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*