Skip Nav

Lets keyboard users skip to main content.

Main Content

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

Click on the "Preview" tab and use the tab key to see the skip to content link.


pnpm dlx shadcn@latest add @shark/skip-nav

Place SkipNavLink as one of the first focusable elements on the page.
Use SkipNavContent to wrap your main content. It renders a div with an id that the link targets.


import { SkipNavContent, SkipNavLink } from "@/components/ui/skip-nav";


<SkipNavLink />
<nav>...</nav>
<SkipNavContent />
<main>Your main content</main>

On This Page