Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Skip Nav for React Radix UI

Lets keyboard users skip to main content.

Framework
UI library
Skip to content

Main Content

This is the main content area. When users press Tab and then Enter on the skip link, focus jumps here.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/skip-nav.json

Usage

import {
  SkipNavContent,
  SkipNavLink,
} from "@/components/ui/skip-nav";
<>
  <SkipNavLink className="focus:absolute" id="demo-content" />

  <SkipNavContent
    className="max-w-sm rounded-lg border bg-card p-4 focus:ring-2"
    id="demo-content"
    tabIndex={undefined}
  >
    <h2 className="mb-2 font-semibold">Main Content</h2>
    <p className="text-muted-foreground text-sm">
      This is the main content area. When users press Tab and then Enter on
      the skip link, focus jumps here.
    </p>
  </SkipNavContent>
</>

Accessibility

KeyDescription
Enter
Activate the focused control.

API Reference

SkipNavLink

a

PropType
AttributeType

SkipNavContent

PropType
AttributeType