Skip Link

Allows navigation past repeated content.

html

<div class="skip-demo" style="--accent:#241430;">
  <a href="#skip-demo-main" class="skip-demo__link is-revealed" style="border-radius:8px;">Skip to main content</a>
  <header class="skip-demo__header">
    <span class="skip-demo__logo">Brand</span>
    <nav class="skip-demo__nav">Home &middot; Products &middot; About &middot; Contact &middot; Support &middot; Careers</nav>
  </header>
  <main id="skip-demo-main" class="skip-demo__main" tabindex="-1">
    <h1 class="skip-demo__h1">Main content</h1>
    <p class="skip-demo__p">Focus lands here, skipping the repeated header links above.</p>
  </main>
  <p class="skip-demo__caption">shown as if Tab-focused &mdash; normally clipped off-screen until focus arrives</p>
</div>
<style>
.skip-demo { width: 340px; font: 13px system-ui, sans-serif; color: #241430; position: relative; }
.skip-demo__link { position: absolute; left: -9999px; top: 0; padding: 10px 16px; background: var(--accent); color: #FAF7F2; text-decoration: none; font-weight: 600; z-index: 2; }
.skip-demo__link:focus, .skip-demo__link.is-revealed { position: static; display: inline-block; margin-bottom: 8px; left: auto; outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-demo__header { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; background: #24143010; flex-wrap: wrap; }
.skip-demo__logo { font-weight: 800; }
.skip-demo__nav { font-size: 12px; color: #241430aa; }
.skip-demo__main { margin-top: 10px; padding: 14px; border-radius: 8px; border: 1.5px dashed #24143033; }
.skip-demo__h1 { margin: 0 0 6px; font-size: 16px; }
.skip-demo__p { margin: 0; font-size: 12px; color: #241430aa; }
.skip-demo__caption { margin-top: 8px; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div style="width:340px;font-family:system-ui,sans-serif;color:#241430" class="relative">
  <a href="#skip-demo-main-tw" class="skip-tw skip-tw--revealed inline-block font-semibold no-underline px-4 py-2.5" style="border-radius:8px;background:#241430;color:#FAF7F2">Skip to main content</a>
  <header class="flex items-center gap-3.5 flex-wrap px-3 py-2.5 rounded-lg bg-[#24143010]">
    <span class="font-extrabold">Brand</span>
    <nav class="text-xs text-[#241430aa]">Home &middot; Products &middot; About &middot; Contact &middot; Support &middot; Careers</nav>
  </header>
  <main id="skip-demo-main-tw" tabindex="-1" class="mt-2.5 p-3.5 rounded-lg border-[1.5px] border-dashed" style="border-color:#24143033">
    <h1 class="m-0 mb-1.5 text-base">Main content</h1>
    <p class="m-0 text-xs text-[#241430aa]">Focus lands here, skipping the repeated header links above.</p>
  </main>
  <p class="mt-2 text-[11px] text-[#241430aa]">shown as if Tab-focused &mdash; normally clipped off-screen until focus arrives</p>
</div>
<style>
.skip-tw { position: absolute; left: -9999px; top: 0; z-index: 2; }
.skip-tw:focus, .skip-tw--revealed { position: static; left: auto; display: inline-block; margin-bottom: 8px; outline: 2px solid #241430; outline-offset: 2px; }
</style>

react

export function SkipLink({
  linkText = "Skip to main content",
  targetLabel = "Main content",
  reveal = true,
  accent = "#241430",
  radius = 8,
}) {
  const hidden = { position: "absolute", left: -9999, top: 0, padding: "10px 16px", background: accent, color: "#FAF7F2", textDecoration: "none", fontWeight: 600, zIndex: 2, borderRadius: radius };
  const shown = { ...hidden, position: "static", left: "auto", display: "inline-block", marginBottom: 8, outline: "2px solid " + accent, outlineOffset: 2 };
  return (
    <div style={{ width: 340, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", position: "relative" }}>
      <a href="#skip-demo-main-r" style={reveal ? shown : hidden}>{linkText}</a>
      <header style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", padding: "10px 12px", borderRadius: 8, background: "#24143010" }}>
        <span style={{ fontWeight: 800 }}>Brand</span>
        <nav style={{ fontSize: 12, color: "#241430aa" }}>Home &middot; Products &middot; About &middot; Contact &middot; Support &middot; Careers</nav>
      </header>
      <main id="skip-demo-main-r" tabIndex={-1} style={{ marginTop: 10, padding: 14, borderRadius: 8, border: "1.5px dashed #24143033" }}>
        <h1 style={{ margin: "0 0 6px", fontSize: 16 }}>{targetLabel}</h1>
        <p style={{ margin: 0, fontSize: 12, color: "#241430aa" }}>Focus lands here, skipping the repeated header links above.</p>
      </main>
      {reveal && <p style={{ marginTop: 8, fontSize: 11, color: "#241430aa" }}>shown as if Tab-focused &mdash; normally clipped off-screen until focus arrives</p>}
    </div>
  );
}