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") without scrolling, 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.
Tab into the example below — the skip link appears fixed to the top-left of the viewport when focused.
Skip to main content1import { SkipToMainLink } from "@ngrok/mantle/skip-to-main-link";2import { Main } from "@ngrok/mantle/main";3 4<SkipToMainLink />5<Header />6<Main>7 <h1>Page title</h1>8</Main>Renders an anchor element that is visually hidden until focused. Accepts all standard <a> HTML attributes except href, which is derived from targetId.