HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DrilldownView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA stack of pages, one showing at a time, with a way back.ExperimentalSince 0.1.0NavigationUsageimport'@fusion.dev/helix/drilldown'import'@fusion.dev/helix-headless/drilldown'Preview
API ReferenceRoothelix-drilldownA stack of pages, one showing at a time, with a way back.
PropTypeDefaultDescriptionbackLabelstring"Back"What the control returning from a page reads.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring"Navigation"Accessible name for the region.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The rows of the top page.
EventTypeDescriptionhelix-selectHelixSelectEventFired when a row with no page is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionback() => booleanReturns one page, and reports whether there was one to return to.
PartDescriptionbackThe control that returns one page.back-markThe glyph on the back control.emptyShown when there are no entries to show.headerThe bar above a page, holding the way back and its name.loadingShown while the entries are still on their way.pageThe region the rows are in.titleThe name of the page showing.
CSS PropertyDescription--drilldown-background-colorFill behind the pages.--drilldown-inline-sizeWidth of the region.
Itemhelix-drilldown-itemOne row of a drill-down, which may hold a page of its own.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the row can be reached at all.focusablebooleanfalseWhether this row holds the region's tab stop. Written by the stack.onPagebooleantrueWhether the page showing is the one this row is on.showingPagebooleanfalseWhether this row's own page is the one showing.valuestring""Identifies the row to whatever is listening.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this row.endAfter the words, usually a mark or a count.pageThe rows of the page this one opens.startBefore the words, usually an icon.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the row is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus onto the row itself.select() => voidAnnounces that this row was chosen.
PartDescriptionitemThe row itself.labelThe words.
CSS PropertyDescription--drilldown-item-hover-colorFill when a row is under the pointer.
Roothelix-headless-drilldownA stack of pages, one showing at a time, with a way back.
PropTypeDefaultDescriptionbackLabelstring"Back"What the control returning from a page reads.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring"Navigation"Accessible name for the region.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The rows of the top page.
EventTypeDescriptionhelix-selectHelixSelectEventFired when a row with no page is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionback() => booleanReturns one page, and reports whether there was one to return to.
PartDescriptionbackThe control that returns one page.back-markThe glyph on the back control.emptyShown when there are no entries to show.headerThe bar above a page, holding the way back and its name.loadingShown while the entries are still on their way.pageThe region the rows are in.titleThe name of the page showing.
Itemhelix-headless-drilldown-itemOne row of a drill-down, which may hold a page of its own.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the row can be reached at all.focusablebooleanfalseWhether this row holds the region's tab stop. Written by the stack.onPagebooleantrueWhether the page showing is the one this row is on.showingPagebooleanfalseWhether this row's own page is the one showing.valuestring""Identifies the row to whatever is listening.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The words naming this row.endAfter the words, usually a mark or a count.pageThe rows of the page this one opens.startBefore the words, usually an icon.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the row is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocusItem() => voidMoves focus onto the row itself.select() => voidAnnounces that this row was chosen.
PartDescriptionitemThe row itself.labelThe words.
ExamplesNameDescriptionEventsA row chosen, from whichever page the stack has replaced itself with.PreviewA menu that replaces itself rather than opening sideways, for a narrow screen.PreviewA menu that replaces itself rather than opening sideways, for a narrow screen.