// Navigation

Skip Nav

Lets keyboard users skip to main content.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/skip-nav

// Usage

1import { SkipNavLink, SkipNavContent } from "@/components/ui/skip-nav";
2
3<SkipNavLink />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7const SKIP_NAV_ID = "skip-nav-content";
8
9export interface SkipNavLinkProps extends React.ComponentProps<typeof ark.a> {
10  /**
11   * The id of the element to skip to.
12   *
13   * @default "skip-nav-content"
14   */
15  id?: string;
16}
17
18export const SkipNavLink = (props: SkipNavLinkProps) => {
19  const { id = SKIP_NAV_ID, className, children, ...rest } = props;
20
21  return (
22    <ark.a
23      className={cn(
24        "focus:fixed focus:inset-s-4 focus:top-4 focus:z-9999",
25        "focus:px-4 focus:py-2",
26        "focus:bg-primary",
27        "focus:text-primary-foreground focus:text-sm",
28        "sr-only focus:not-sr-only",

// Dependencies

@ark-ui/react