HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
OutlineView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorLinks to the headings on the page, with the section in view marked.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/outline'import'@fusion.dev/helix-headless/outline'Preview
API ReferenceRoothelix-outlineLinks to the headings on the page, with the section in view marked.
PropTypeDescriptionbehaviorScrollBehaviorDefault"auto"How the page scrolls to a section when its link is clicked.followbooleanDefaultfalseKeeps the link of the section in view in view itself, in an outline
longer than the box it scrolls in, such as a contents rail with a
scrollbar of its own. Only that box moves: never the page, and never the
box the sections scroll in.labelstringDefault"On this page"The navigation's name, read by screen readers. A heading in the heading
slot names it in place of this.marks"reading"|"visible"Default"reading"Which links are marked. reading marks the one section being read, the
last whose heading has passed the reading line. visible marks every
section with part of it on screen, and the mark runs across their links.offsetnumberDefault0How far below the top of the scroll container a heading counts as reached,
in pixels. The scroll container is the window or the panel the sections
scroll in.
ReadTypeDescriptioncurrentstringThe id of the section in view, or empty before anything is measured.markedstring[]The ids of the sections whose links are marked, in page order: the one
current names, or under marks="visible" every section on screen.
Read-only, for the reason current gives.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The links, as anchors with fragment hrefs, or lists holding them.headingA heading above the links, such as "On this page". It names the navigation.indicatorA mark of your own, drawn inside the indicator part, where --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size reach it.
EventTypeDescriptionhelix-activateHelixActivateEventFired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
MethodTypeDescriptionscrollToSection(id: string) => booleanScrolls to the section with this id, as a press on its link does, with
behavior, and marks its link at once. The address and focus stay where
they are. Returns whether the outline has a link to that section.
PartDescriptionheadingThe box holding the heading slot, above the navigation.indicatorThe mark that moves to the link of the section in view. It carries that link's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size, and data-placed once it has been placed, for a mark you draw and animate yourself.navThe navigation landmark.
CSS PropertyDescription--outline-heading-colorThe color of the heading in the heading slot.--outline-indentHow far each level is inset from the one above.--outline-indicator-colorThe color of the mark that moves to the section in view.--outline-link-colorThe color of a link.--outline-link-current-colorThe color of the link to the section in view.--outline-link-current-weightThe weight of the link to the section in view.--outline-link-font-sizeThe size of a link's text.--outline-link-hover-background-colorThe fill behind a link under the pointer.--outline-link-hover-colorThe color of a link under the pointer.--outline-link-padding-blockThe space above and below a link's text.--outline-link-padding-inlineThe space either side of a link's text, before any indent.--outline-link-radiusThe corner radius of a link's hover fill.--outline-railThe width of the gutter that holds the line and the moving mark.--outline-rule-colorThe color of the line down the leading edge.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-outlineLinks to the headings on the page, with the section in view marked.
PropTypeDescriptionbehaviorScrollBehaviorDefault"auto"How the page scrolls to a section when its link is clicked.followbooleanDefaultfalseKeeps the link of the section in view in view itself, in an outline
longer than the box it scrolls in, such as a contents rail with a
scrollbar of its own. Only that box moves: never the page, and never the
box the sections scroll in.labelstringDefault"On this page"The navigation's name, read by screen readers. A heading in the heading
slot names it in place of this.marks"reading"|"visible"Default"reading"Which links are marked. reading marks the one section being read, the
last whose heading has passed the reading line. visible marks every
section with part of it on screen, and the mark runs across their links.offsetnumberDefault0How far below the top of the scroll container a heading counts as reached,
in pixels. The scroll container is the window or the panel the sections
scroll in.
ReadTypeDescriptioncurrentstringThe id of the section in view, or empty before anything is measured.markedstring[]The ids of the sections whose links are marked, in page order: the one
current names, or under marks="visible" every section on screen.
Read-only, for the reason current gives.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The links, as anchors with fragment hrefs, or lists holding them.headingA heading above the links, such as "On this page". It names the navigation.indicatorA mark of your own, drawn inside the indicator part, where --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size reach it.
EventTypeDescriptionhelix-activateHelixActivateEventFired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
MethodTypeDescriptionscrollToSection(id: string) => booleanScrolls to the section with this id, as a press on its link does, with
behavior, and marks its link at once. The address and focus stay where
they are. Returns whether the outline has a link to that section.
PartDescriptionheadingThe box holding the heading slot, above the navigation.indicatorThe mark that moves to the link of the section in view. It carries that link's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size, and data-placed once it has been placed, for a mark you draw and animate yourself.navThe navigation landmark.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionEventsThe section in view, reported by helix-activate as the page scrolls.PreviewHeadings on a page, with the one in view marked as the page scrolls.PreviewHeadings on a page, with the one in view marked as the page scrolls.Smooth With OffsetThe same outline, scrolling smoothly and stopping clear of a sticky header.