amezquita design systemGet started

Primitives

SkipLink

First Tab stop on the page that lets keyboard users jump past the header to the main content

Markdown version for agents

Import
import { SkipLink } from '@amezquita/design-system/components/primitives/SkipLink'

Live render

This site’s own SkipLink is the first Tab stop on every page. Press Tab from the top of the page to see it.

    Props

    PropTypeDescription
    targetId?stringThe id of the element to jump to, without #. Defaults to 'main-content', so <main id="main-content"> needs no prop here.
    children?React.ReactNodeDefaults to "Skip to main content".

    Also accepts all props of: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>

    Usage example

    tsx
    <>
  <SkipLink />
  <main id="main-content">
    <p>Press Tab: the skip link appears in the top-left corner.</p>
  </main>
</>

    Accessibility

    • Semantic element: <a href="#main-content">
    • On activation it moves focus to the target, adding tabindex="-1" if the target isn't focusable, so the next Tab continues from the main content instead of the top of the page
    • Visible whenever focused (:focus, not only :focus-visible)
    • The only component with an explicit z-index after decisions/0007: it isn't portalled, so mount order can't lift it