전체 카탈로그
NavigationOutline6 props

Outline

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

공식 문서 열기
live previewNavigation

Preview

Import

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

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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

outlinetable of contentstocheading navigationscroll spydocumentationanchorssliding indicator

Important props

densitydefault | compactoptional

Theming targets

astryx-outlineastryx-outline-item

Best practices

  • DoPass a flat ordered list of headings and let level control indentation.
  • DoUse activeId when custom scroll logic owns the active section.
  • DoUse density="compact" in dense sidebars where vertical space is tight.
  • DoUse useOutlineFromMarkdown or useOutlineFromDOM when headings are generated from content.