HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
NavigationView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA set of destinations, with a marker on the current one.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/navigation'import'@fusion.dev/helix-headless/navigation'Preview
API ReferenceRoothelix-navigationA set of destinations, with a marker on the current one.
PropTypeDescriptionarrowsbooleanDefaultfalseWhether the arrow keys move focus between the destinations.labelstringDefault"Main"The landmark's name, read by screen readers.orientation"vertical"Stacks the destinations in a column, for a sidebar, where unset is a row
for a header or a footer. The marker follows the current destination down
the column as it does along the row.variant"segmented"|"underlined"How the destinations are drawn, with Tabs' three values and for the same
reasons.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The destinations, as your own links.indicatorA marker of your own, drawn inside the indicator part, where the current destination's place and size reach it.
PartDescriptionindicatorThe marker that moves to the current destination. It carries the destination's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size, and data-placed once it has been placed.navThe navigation landmark.
CSS PropertyDescription--navigation-block-sizeHeight of the bar in a row. Each destination fills it.--navigation-gapSpace between destinations.--navigation-indicator-colorFill of the marker on the current destination: the bar under underlined, and the pill otherwise.--navigation-indicator-radiusCorner radius of the marker.--navigation-indicator-shadowShadow under the marker, for a marker that sits raised on the bar, as segmented draws it.--navigation-indicator-thicknessHeight of the bar under underlined, and its width down a column.--navigation-item-colorText color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.--navigation-item-current-colorText color of the current destination, the one marked aria-current="page".--navigation-item-current-font-weightWeight of the current destination's text.--navigation-item-font-sizeSize of a destination's text.--navigation-item-font-weightWeight of a destination's text.--navigation-item-hover-background-colorBackground of a destination under the pointer.--navigation-item-hover-colorText color of a destination under the pointer.--navigation-item-padding-inlineSpace either side of a destination's text.--navigation-item-radiusCorner radius of a destination, which its hover background follows.--navigation-rule-colorColor of the rule under the row in underlined.
Custom stateDescriptionopenWhile a megamenu or another disclosure among the destinations is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-navigationA set of destinations, with a marker on the current one.
PropTypeDescriptionarrowsbooleanDefaultfalseWhether the arrow keys move focus between the destinations.labelstringDefault"Main"The landmark's name, read by screen readers.orientation"vertical"Stacks the destinations in a column, for a sidebar, where unset is a row
for a header or a footer. The marker follows the current destination down
the column as it does along the row.variant"segmented"|"underlined"How the destinations are drawn, with Tabs' three values and for the same
reasons.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The destinations, as your own links.indicatorA marker of your own, drawn inside the indicator part, where the current destination's place and size reach it.
PartDescriptionindicatorThe marker that moves to the current destination. It carries the destination's place and size as --indicator-x, --indicator-y, --indicator-inline-size and --indicator-block-size, and data-placed once it has been placed.navThe navigation landmark.
Custom stateDescriptionopenWhile a megamenu or another disclosure among the destinations is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionPreviewLinks with the current page marked by a marker that moves to it.PreviewLinks with the current page marked by a marker that moves to it.SegmentedLinks in a sunken track, with the current page marked by a raised pill.UnderlinedLinks with the current page marked by a bar on a rule under the row.