Outline @astryx-svelte/core v0.3.0 · Outline
Usage
A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes. Features a sliding indicator track that animates to the active heading. The list is a single tab stop: arrow keys move between headings, Home/End jump to the ends, and Enter/Space activate.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Pass a flat ordered list of headings and let level control indentation. |
| Do | Use activeId when custom scroll logic owns the active section. |
| Do | Use density="compact" in dense sidebars where vertical space is tight. |
| Do | Use useOutlineFromMarkdown or useOutlineFromDOM when headings are generated from content. |
| Do | Pass scrollContainerRef when the content scrolls in a split pane, modal, or panel instead of the viewport. |
| Do | Set offset to the height of a fixed header that overlays the content, so headings land below it instead of underneath it. |
| Don't | Use Outline for application navigation - use SideNav or TopNav for routes. |
| Don't | Use Outline for expandable hierarchy - use TreeList when nodes need expand and collapse. |
| Don't | Rely on onNavigateEnd to mean "arrived" - it also fires when the user interrupts the scroll. |
Examples
Common configurations, variations, and states.Outline — Controlled
Drive the active section yourself with activeId and onActiveIdChange. Providing activeId disables the built-in scroll-spy so your own logic owns the highlight.
Outline — Deep Nesting
Heading levels 1 through 4 map to progressively deeper indentation, so a long document with sub-sections stays scannable.
Outline — Density
Two density variants control item padding. Use compact for dense sidebars and default for standard documentation layouts. The sliding indicator automatically matches each item height.