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.

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

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

Key	Description
`Enter`	Activate the focused control.

API Reference

SkipNavLink

a

PropType

AttributeType

SkipNavContent

PropType

AttributeType

Skeleton

Slider