HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Skip LinkView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA link at the start of a page that moves keyboard focus past the
header to the main content.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/skip-link'import'@fusion.dev/helix-headless/skip-link'Preview
API ReferenceRoothelix-skip-linkA link at the start of a page that moves keyboard focus past the
header to the main content.
PropTypeDescriptionhrefstringDefault"#main"The in-page fragment the link moves focus to, such as #main.labelstringDefault"Skip to content"The link's text, when it is plain text.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The link's text. Defaults to label.
PartDescriptionlinkThe anchor. It takes the focus.
CSS PropertyDescription--skip-link-background-colorThe background of the link while it is shown.--skip-link-border-colorThe border color of the link while it is shown.--skip-link-border-widthThe border width of the link while it is shown. Follows --helix-border-floating, which is 0, so the link is set apart by its shadow unless a theme sets a border.--skip-link-colorThe text color of the link while it is shown.--skip-link-font-sizeThe size of the link's text.--skip-link-inset-blockHow far the shown link sits from the top of the viewport.--skip-link-inset-inlineHow far the shown link sits from the start edge of the viewport.--skip-link-padding-blockThe space above and below the link's text.--skip-link-padding-inlineThe space either side of the link's text.--skip-link-radiusThe corner radius of the link.--skip-link-shadowThe shadow under the link while it is shown. Follows --helix-shadow-floating, because the link sits over the corner of the page.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-skip-linkA link at the start of a page that moves keyboard focus past the
header to the main content.
PropTypeDescriptionhrefstringDefault"#main"The in-page fragment the link moves focus to, such as #main.labelstringDefault"Skip to content"The link's text, when it is plain text.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The link's text. Defaults to label.
PartDescriptionlinkThe anchor. It takes the focus.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCustom TargetA link to content with the id results, and text that says where the link goes. Tab into the frame to show it.PreviewA skip link, focused here so it shows. Pressing it moves focus to the content after the header.PreviewA skip link, focused here so it shows. Pressing it moves focus to the content after the header.