Astryx Design System

Outline@astryxdesign/core v0.0.15 · 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.

ts
import {Outline} from '@astryxdesign/core/Outline'

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.
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.

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.