Skip to main content
/mantle

Skip to Main Link

A visually-hidden-until-focused "skip link" that lets keyboard users jump past repeated navigation and land directly on the page's main content landmark. When activated, it focuses the element identified by targetId (defaulting to "main") and updates the URL hash using the browser History API, so it works in any framework, including React Router, Next.js, or plain HTML.

Pair with the Main component (or any element with a matching id and tabIndex={-1}) so it can receive focus.

The focus call scrolls a target that sits off screen into view, so a sighted keyboard user sees where focus went. A target already in view does not move. Place the link at the top of the document, before the navigation it skips.

Tab into the example below — the skip link appears fixed to the top-left of the viewport when focused. It targets this page's own main landmark, the one around the content you are reading, because a page has one.

Skip to main content
import { SkipToMainLink } from "@ngrok/mantle/skip-to-main-link";import { Main } from "@ngrok/mantle/main"; export function App() {	return (		<>			<SkipToMainLink />			<Main>				<h1>Page title</h1>			</Main>		</>	);}

API Reference

SkipToMainLink

Renders an anchor element that is visually hidden until focused. Accepts all standard <a> HTML attributes except href, which is derived from targetId.

PropTypeDefaultDescription
targetId?string"main"The id of the element to focus when activated. The link's href is set to #${targetId}.
children?ReactNode"Skip to main content"The label displayed when the link is focused.
Data AttributeValueDescription
data-slot"skip-to-main-link anchor"Names the part, joined after any chain a composing ancestor passes and ahead of Anchor's own slot.