Skip to main content

SkipLink

Implemented

Skip-to-main-content link. Hidden off-screen at top:-40px, slides down on focus. WCAG 2.4.1 Bypass Blocks.

Categorymolecules
Sourcepatterns/molecules/skiplink.html
AI HintUse for grouped UI patterns. Combine atoms into functional units.

Skip-to-main-content link (WCAG 2.4.1 Bypass Blocks). Hidden off-screen with a transform slide (-translate-y-40), revealed on keyboard focus. Must be the first focusable element on the page.

SkipLink

molecules

Bypass-block anchor. Hidden via transform — never display:none — so it stays in the accessibility tree and the tab order.

The link sits off-screen until it receives focus — press Tab to reveal it, then Enter to move focus to the target below.

Simulated page header & navigation
Main content — the skip target. Focus lands here when the link is activated, because it carries tabIndex={-1}.
Skip to main content

Props

Prop
Type
Required
Default
Description
href
string
Optional
'#main-content'

Link target URL.

children
React.ReactNode
Optional
'Skip to main content'

Visible link label; localize via translated children.

className
string
Optional
—

Additional CSS classes appended to the anchor.

Quick use:<SkipLink />

Accessibility

ARIA rolelink

ARIA

1 rule

WCAG 2.4.1

MUST be the first focusable element on the page

render

1 rule

WCAG 2.4.3

When focused, link slides into view at top:8px; hidden via transform not display:none (preserves focus order)

Usage

Import

tsxSnippet
import { SkipLink } from "@epasslive/design-system"

Example 1

tsxSnippet
<SkipLink />

Example 2

tsxSnippet
<SkipLink variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules

Design System v4.1.0 | ePassLive