HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DrilldownView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA stack of pages that shows one at a time, with a back button.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/drilldown'import'@fusion.dev/helix-headless/drilldown'Preview
API ReferenceRoothelix-drilldownA stack of pages that shows one at a time, with a back button.
PropTypeDescriptionbackLabelstringDefault"Back"The text of the back button.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.labelstringDefault"Navigation"The name of the top page's menu, read by screen readers. A page below it is
named by its title.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.navigationbooleanDefaultfalseWhether the drilldown is a site's navigation: a navigation landmark
named by label, whose pages are lists of links. Without it, each page is
a menu.pagestringDefault""The page showing, as the value of the row that opens it. Empty is the
top page. Setting it shows that page, and a value no row with a page has
shows the top page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The rows of the top page.back-iconReplaces the icon on the back button.
EventTypeDescriptionhelix-navigateHelixNavigateEventFired before a reader moves into a page or back out of one. detail.value is the value of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing.helix-selectHelixSelectEventFired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionback() => booleanGoes back one page, and returns whether there was a page to go back to.
PartDescriptionbackThe button that goes back one page.back-markThe icon on the back button.emptyShown when there are no entries to show.headerThe bar above a page, which holds the back button and the page's name.liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.loadingShown while the entries load.pageThe menu the rows are in.titleThe name of the page showing.
CSS PropertyDescription--drilldown-back-colorColor of the back button's icon.--drilldown-back-hover-background-colorFill of the back button under the pointer.--drilldown-background-colorFill behind the pages.--drilldown-durationHow long a page takes to slide in.--drilldown-header-block-sizeHeight of the bar above a page.--drilldown-header-border-colorColor of the rule under the bar above a page.--drilldown-inline-sizeWidth of the region.--drilldown-page-padding-blockSpace above and below a page's rows.--drilldown-title-colorColor of the page's name.--drilldown-title-font-sizeSize of the page's name.--drilldown-title-font-weightWeight of the page's name.--drilldown-travelHow far a page slides as it arrives, along the line of text.
Custom stateDescriptionbackThe last move went back out of a page.drilledA row's page is showing, so a frame around the drilldown can style itself for that depth.forwardThe last move went into a page.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-drilldown-itemOne row of a drill-down, which can open a page of its own.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the row can be reached at all.downloadbooleanDefaultfalseWhether the link downloads the file when the row is chosen. Only
meaningful beside an href, and only for a file served from this origin.focusablebooleanDefaultfalseWhether this row holds the region's tab stop. Set by the drill-down.hrefstringDefault""The URL the row links to. Setting it renders the row as a link, unless the
row opens a page or is disabled.relstringDefault""The link's rel. Set it whenever you set target="_blank".targetstringDefault""Where the link opens, for rows that should open outside the current page.valuestringDefault""Identifies the row to your event listeners.
ReadTypeDescriptionactivebooleanWhether the row has focus, which makes it the row the keyboard is on.selectedbooleanWhether the row has focus, the same as active.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's label.chevronReplaces the caret of a row that opens a page, such as with your own icon.descriptionA line under the label that describes the row. It describes the row to a screen reader and is not part of its name.endContent after the label, such as the setting a page holds or a count. It describes the row and is not part of its name.pageThe rows of the page this row opens.startContent before the label, usually an icon.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the row is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionclick() => voidPresses the row, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
chooses the row, or follows its link, once.focusItem() => voidMoves focus onto the row itself.select() => voidFires helix-select for this row.
PartDescriptionitemThe row itself, which is an <a> where href is set.labelThe row's label.markThe caret at the end of a row that opens a page, after the end slot. The caret points, so a stylesheet mirrors it in a right-to-left document.
CSS PropertyDescription--drilldown-item-block-sizeHeight of a row.--drilldown-item-colorColor of a row's words.--drilldown-item-description-colorColor of the line under a row's label.--drilldown-item-disabled-opacityHow faint a disabled row is drawn.--drilldown-item-font-sizeSize of a row's words.--drilldown-item-hover-colorFill when a row is under the pointer.--drilldown-item-mark-colorColor of the caret on a row that opens a page.--drilldown-item-padding-inlineSpace at either end of a row.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-drilldownA stack of pages that shows one at a time, with a back button.
PropTypeDescriptionbackLabelstringDefault"Back"The text of the back button.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.labelstringDefault"Navigation"The name of the top page's menu, read by screen readers. A page below it is
named by its title.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.navigationbooleanDefaultfalseWhether the drilldown is a site's navigation: a navigation landmark
named by label, whose pages are lists of links. Without it, each page is
a menu.pagestringDefault""The page showing, as the value of the row that opens it. Empty is the
top page. Setting it shows that page, and a value no row with a page has
shows the top page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The rows of the top page.back-iconReplaces the icon on the back button.
EventTypeDescriptionhelix-navigateHelixNavigateEventFired before a reader moves into a page or back out of one. detail.value is the value of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing.helix-selectHelixSelectEventFired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionback() => booleanGoes back one page, and returns whether there was a page to go back to.
PartDescriptionbackThe button that goes back one page.back-markThe icon on the back button.emptyShown when there are no entries to show.headerThe bar above a page, which holds the back button and the page's name.liveA copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.loadingShown while the entries load.pageThe menu the rows are in.titleThe name of the page showing.
Custom stateDescriptionbackThe last move went back out of a page.drilledA row's page is showing, so a frame around the drilldown can style itself for that depth.forwardThe last move went into a page.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-headless-drilldown-itemOne row of a drill-down, which can open a page of its own.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the row can be reached at all.downloadbooleanDefaultfalseWhether the link downloads the file when the row is chosen. Only
meaningful beside an href, and only for a file served from this origin.focusablebooleanDefaultfalseWhether this row holds the region's tab stop. Set by the drill-down.hrefstringDefault""The URL the row links to. Setting it renders the row as a link, unless the
row opens a page or is disabled.relstringDefault""The link's rel. Set it whenever you set target="_blank".targetstringDefault""Where the link opens, for rows that should open outside the current page.valuestringDefault""Identifies the row to your event listeners.
ReadTypeDescriptionactivebooleanWhether the row has focus, which makes it the row the keyboard is on.selectedbooleanWhether the row has focus, the same as active.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's label.chevronReplaces the caret of a row that opens a page, such as with your own icon.descriptionA line under the label that describes the row. It describes the row to a screen reader and is not part of its name.endContent after the label, such as the setting a page holds or a count. It describes the row and is not part of its name.pageThe rows of the page this row opens.startContent before the label, usually an icon.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the row is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
MethodTypeDescriptionclick() => voidPresses the row, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
chooses the row, or follows its link, once.focusItem() => voidMoves focus onto the row itself.select() => voidFires helix-select for this row.
PartDescriptionitemThe row itself, which is an <a> where href is set.labelThe row's label.markThe caret at the end of a row that opens a page, after the end slot. The caret points, so a stylesheet mirrors it in a right-to-left document.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionEventsThe helix-select event, sent when you choose a row at any level of the menu.NavigationA site's navigation, with pages of links in a landmark.PreviewA menu that shows each submenu in place of the current list, for a narrow screen.PreviewA menu that shows each submenu in place of the current list, for a narrow screen.