shadcn.io is not affiliated with official shadcn/ui

Shadcn Skip Nav for React and Tailwind

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.

Installation

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

pnpm dlx shadcn@latest add https://kit.dev/r/skip-nav.json

npx shadcn@latest add https://kit.dev/r/skip-nav.json

yarn shadcn@latest add https://kit.dev/r/skip-nav.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/skip-nav.tsx

import { ark } from "@ark-ui/react/factory";
import type React from "react";
import { cn } from "@/lib/utils";

const SKIP_NAV_ID = "skip-nav-content";

export interface SkipNavLinkProps extends React.ComponentProps<typeof ark.a> {
  /**
   * The id of the element to skip to.
   *
   * @default "skip-nav-content"
   */
  id?: string;
}

export const SkipNavLink = (props: SkipNavLinkProps) => {
  const { id = SKIP_NAV_ID, className, children, ...rest } = props;

  return (
    <ark.a
      className={cn(
        "focus:fixed focus:inset-s-4 focus:top-4 focus:z-9999",
        "focus:px-4 focus:py-2",
        "focus:bg-primary",
        "focus:text-primary-foreground focus:text-sm",
        "sr-only focus:not-sr-only",
        "focus:rounded-lg",
        "focus:outline-none focus:ring-2 focus:ring-ring",
        className
      )}
      data-slot="skip-nav-link"
      href={`#${id}`}
      {...rest}
    >
      {children ?? "Skip to content"}
    </ark.a>
  );
};

export interface SkipNavContentProps extends React.ComponentProps<"div"> {
  /**
   * The id that SkipNavLink links to.
   *
   * @default "skip-nav-content"
   */
  id?: string;
}

export const SkipNavContent = (props: SkipNavContentProps) => {
  const { id = SKIP_NAV_ID, className, ...rest } = props;

  return (
    <div
      className={cn("outline-none", className)}
      data-slot="skip-nav-content"
      id={id}
      tabIndex={-1}
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

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>

API Reference

SkipNavLink

Prop	Type	Default
`id`	`string`	`"skip-nav-content"`
`className`	`string`	-
`asChild`	`boolean`	`false`

SkipNavContent

Prop	Type	Default
`id`	`string`	`"skip-nav-content"`
`className`	`string`	-
`asChild`	`boolean`	`false`

Skeleton

Slider