Skip to content

SkipLink

SM, under 950B gzipped

The page's first focusable element, visible only once focused.

Category
Navigation
Budget
sm, single-purpose control
Runtime deps
None

Preview

Preview language
Skip to content

This is the exact fixture the conformance suite renders in CI. Switch the language to see the component mirror and reformat.

Install

npx shadcn@latest add https://kata-ui-rho.vercel.app/r/skip-link.json

Copies the source into your project. Pulls in 2 primitives: sanitize, cn.

Source

import { sanitizeHref } from "../lib/sanitize";
import { cn } from "../lib/cn";

export interface SkipLinkProps {
  href: string;
  children?: React.ReactNode;
  className?: string;
}

/**
 * The first focusable element on the page for a keyboard user — invisible
 * until it receives focus, at which point it must become visible; a skip
 * link a sighted keyboard user cannot see when it is focused is not
 * meaningfully different from no skip link at all.
 */
export function SkipLink({ href, children = "Skip to content", className }: SkipLinkProps) {
  return (
    <a
      href={sanitizeHref(href)}
      className={cn(
        "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-blue-600 focus:px-4 focus:py-2 focus:text-on-accent",
        className,
      )}
    >
      {children}
    </a>
  );
}

What CI checks

← All components