Skip Link

First focusable element on a page: hidden until focused, jumps keyboard users past the navigation.

Import

import { SkipNavLink, SkipNavTarget } from '@marbleui/ui'

Props

<SkipNavLink>

Prop	Type	Default
children	`ReactNode`	`'Skip to content'`
className	`string`	`—`
href	`string`	`'#main'`

<SkipNavTarget>

Target for SkipNavLink. Put it at the start of your main content.

Prop	Type	Default	Description
id	`string`	`'main'`

Usage notes

“Skip to content” link for keyboard users. It is hidden until focused and jumps past repeated navigation. Pair SkipNavLink with a SkipNavTarget.

<body>
  <SkipNavLink />
  <Navbar ... />
  <SkipNavTarget />
  <main>...</main>
</body>

Make SkipNavLink the first focusable element on the page, before the navigation.
href defaults to #main and SkipNavTarget id defaults to main; change both together. children defaults to “Skip to content”.
The target is a focusable, empty div (tabIndex={-1}), so place it directly before the main content.

Example source · show

import { SkipNavLink, SkipNavTarget } from './skip-nav'

export const styles = {
  Default: () => (
    <div className="relative flex h-56 w-[30rem] flex-col overflow-hidden rounded-xl border border-border bg-surface text-sm [transform:translateZ(0)]">
      <SkipNavLink href="#skip-demo-main" className="absolute" />
      <div className="flex gap-4 border-b border-border p-3 text-fg-muted">
        <a href="#">Home</a>
        <a href="#">Projects</a>
        <a href="#">Settings</a>
      </div>
      <SkipNavTarget id="skip-demo-main" />
      <div className="p-4 text-fg-muted">Click here, then press Tab: the “Skip to content” link appears first.</div>
    </div>
  ),
}

Source: packages/ui/src/skip-nav/skip-nav.tsx

Catalog

Category: navigation
Priority: Core
Primitive: composed
React Aria: Link