Skip to content
Site volume
Colourway

Components

SkipLink

The first focusable element: "Skip to content", visible on focus.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/skip-link
On this page

Example#

Look of this example

Usage#

Every page starts with a skip link: the first thing a keyboard reaches, "Skip to content", which jumps to Main. It stays out of sight until it takes focus, then prints as a white key at the top start, above the header.

  • Place it first in the body, before the navbar.
  • Target. It points at #mk-main by default, the id Main carries.

Anatomy#

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The label is "Skip to content". It never changes from page to page.

Do and don't#

Do

First in the page.

Don't

A skip link placed after the navbar, so keyboard users tab through every item before reaching it.

Placed too late to help.

The skip link saves keyboard users from tabbing through the header on every page. It only works if it comes first.

Accessibility#

  • Put it first in <body>; it targets #mk-main (Main).
  • It is hidden until focused, then sits above the header as a white key.

Props#

PropTypeDefaultDescription
labelstringnoneDefault "Skip to content".

Plus 287 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from SkipLinkProps in packages/overprint-react/src/reading/skip-link/skip-link.tsx.

Tokens#

System tokens (8)

Scanned from its CSS at build and checked against its registry entry; 3 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry