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.
ts
| 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. |
| 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. |
Drive the active section yourself with activeId and onActiveIdChange. Providing activeId disables the built-in scroll-spy so your own logic owns the highlight.
Heading levels 1 through 4 map to progressively deeper indentation, so a long document with sub-sections stays scannable.
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.