Skip navigation

Helps users quickly move past navigation, menus, and headers to reach main content.

Acme Inc.

#main

This is just for practice

Then press Tab to cycle through them

'use client';

import { Button } from '@components/caprice-ui/button';
import * as SkipNavigation from '@components/caprice-ui/skip-navigation';
import { useRef } from 'react';

export default function SkipNavigationDemo() {
  const skipLinkRef = useRef<HTMLAnchorElement>(null);

  return (
    <div className="flex min-h-[352px] w-full flex-col">
      <SkipNavigation.Root className="w-full text-sm">
        <SkipNavigation.List>
          <SkipNavigation.Item>
            <SkipNavigation.Link href="#main" ref={skipLinkRef}>
              Skip to main content
            </SkipNavigation.Link>
          </SkipNavigation.Item>
          <SkipNavigation.Item>
            <SkipNavigation.Link href="#footer">Skip to footer</SkipNavigation.Link>
          </SkipNavigation.Item>
        </SkipNavigation.List>
      </SkipNavigation.Root>

      <header className="flex items-center justify-between border-border border-b bg-background px-4 py-3">
        <span className="font-semibold">Acme Inc.</span>
        <nav className="flex gap-4 text-muted-foreground">
          <a className="hover:text-foreground" href="#products">
            Products
          </a>
          <a className="hover:text-foreground" href="#solutions">
            Solutions
          </a>
          <a className="hover:text-foreground" href="#pricing">
            Pricing
          </a>
          <a className="hover:text-foreground" href="#docs">
            Docs
          </a>
        </nav>
      </header>

      <main
        className="relative flex flex-1 scroll-mt-12 flex-col items-center justify-center gap-3 bg-secondary/50 px-4 py-8"
        id="main"
      >
        <span className="absolute top-2 left-2 rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-muted-foreground text-xs">
          #main
        </span>
        <h2 className="font-semibold text-lg">This is just for practice</h2>
        <Button onClick={() => skipLinkRef.current?.focus()} variant="outline">
          Focus skip links
        </Button>
        <p className="text-center text-muted-foreground text-xs">
          Then press{' '}
          <kbd className="rounded border border-border bg-background px-1.5 py-0.5">Tab</kbd> to
          cycle through them
        </p>
      </main>

      <footer
        className="relative mt-auto border-border border-t bg-background px-4 py-3 text-muted-foreground"
        id="footer"
      >
        <span className="absolute top-2 left-2 rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-xs">
          #footer
        </span>
        <p className="text-center">© 2025 Acme Inc. All rights reserved.</p>
      </footer>
    </div>
  );
}

Installation

npx shadcn@latest add @caprice/skip-navigation

npx shadcn@latest add @caprice/skip-navigation

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

import { mergeProps, useRender } from '@base-ui/react';
import { cn } from '@/lib/utils';

/**
 * Groups the skip navigation links.
 * Renders a `<nav>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Root {
  export type Props = useRender.ComponentProps<'nav'>;
}

export function Root({ className, render, ...props }: Root.Props) {
  const defaultProps: useRender.ElementProps<'nav'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation',
    'aria-label': 'Skip link navigation',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'nav',
    render,
    props: mergeProps<'nav'>(defaultProps, props),
  });
}

/**
 * A list of individual skip navigation links.
 * Renders a `<ul>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace List {
  export type Props = useRender.ComponentProps<'ul'>;
}

export function List({ className, render, ...props }: List.Props) {
  const defaultProps: useRender.ElementProps<'ul'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-list',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'ul',
    render,
    props: mergeProps<'ul'>(defaultProps, props),
  });
}

/**
 * An individual skip navigation link.
 * Renders a `<li>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Item {
  export type Props = useRender.ComponentProps<'li'>;
}

export function Item({ className, render, ...props }: Item.Props) {
  const defaultProps: useRender.ElementProps<'li'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-item',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'li',
    render,
    props: mergeProps<'li'>(defaultProps, props),
  });
}

/**
 * A link that can be used to skip navigation.
 * Renders an `<a>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Link {
  export type Props = useRender.ComponentProps<'a'>;
}

export function Link({ className, render, ...props }: Link.Props) {
  const defaultProps: useRender.ElementProps<'a'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-link',
    className: cn(
      'absolute inset-x-0 top-0 bottom-auto z-50 mx-auto inline-block w-fit -translate-y-[150%] transform rounded-b-md bg-background px-6 py-3 text-foreground text-xl outline-none transition-[translate,color] duration-200 will-change-transform focus:translate-y-0 focus:outline-2 focus:outline-primary/80 focus:outline-solid focus:outline-offset-2',
      className
    ),
  };

  return useRender({
    defaultTagName: 'a',
    render,
    props: mergeProps<'a'>(defaultProps, props),
  });
}

import { mergeProps, useRender } from '@base-ui/react';import { cn } from '@/lib/utils';/** * Groups the skip navigation links. * Renders a `<nav>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Root {  export type Props = useRender.ComponentProps<'nav'>;}export function Root({ className, render, ...props }: Root.Props) {  const defaultProps: useRender.ElementProps<'nav'> & { 'data-slot'?: string } = {    'data-slot': 'skip-navigation',    'aria-label': 'Skip link navigation',    className: cn('', className),  };  return useRender({    defaultTagName: 'nav',    render,    props: mergeProps<'nav'>(defaultProps, props),  });}/** * A list of individual skip navigation links. * Renders a `<ul>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace List {  export type Props = useRender.ComponentProps<'ul'>;}export function List({ className, render, ...props }: List.Props) {  const defaultProps: useRender.ElementProps<'ul'> & { 'data-slot'?: string } = {    'data-slot': 'skip-navigation-list',    className: cn('', className),  };  return useRender({    defaultTagName: 'ul',    render,    props: mergeProps<'ul'>(defaultProps, props),  });}/** * An individual skip navigation link. * Renders a `<li>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Item {  export type Props = useRender.ComponentProps<'li'>;}export function Item({ className, render, ...props }: Item.Props) {  const defaultProps: useRender.ElementProps<'li'> & { 'data-slot'?: string } = {    'data-slot': 'skip-navigation-item',    className: cn('', className),  };  return useRender({    defaultTagName: 'li',    render,    props: mergeProps<'li'>(defaultProps, props),  });}/** * A link that can be used to skip navigation. * Renders an `<a>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Link {  export type Props = useRender.ComponentProps<'a'>;}export function Link({ className, render, ...props }: Link.Props) {  const defaultProps: useRender.ElementProps<'a'> & { 'data-slot'?: string } = {    'data-slot': 'skip-navigation-link',    className: cn(      'absolute inset-x-0 top-0 bottom-auto z-50 mx-auto inline-block w-fit -translate-y-[150%] transform rounded-b-md bg-background px-6 py-3 text-foreground text-xl outline-none transition-[translate,color] duration-200 will-change-transform focus:translate-y-0 focus:outline-2 focus:outline-primary/80 focus:outline-solid focus:outline-offset-2',      className    ),  };  return useRender({    defaultTagName: 'a',    render,    props: mergeProps<'a'>(defaultProps, props),  });}

Update the import paths to match your project setup.

Usage

import * as SkipNavigation from "@/components/caprice-ui/skipnavigation"

import * as SkipNavigation from "@/components/caprice-ui/skipnavigation"

import * as SkipNavigation from "@caprice-ui/react/skipnavigation"

import * as SkipNavigation from "@caprice-ui/react/skipnavigation"

<SkipNavigation.Root>
  <SkipNavigation.List>
    <SkipNavigation.Item>
      <SkipNavigation.Link href="#main">
        Skip to main content
      </SkipNavigation.Link>
    </SkipNavigation.Item>
  </SkipNavigation.List>
</SkipNavigation.Root>

'use client'; import { Button } from '@components/caprice-ui/button'; import * as SkipNavigation from '@components/caprice-ui/skip-navigation'; import { useRef } from 'react'; export default function SkipNavigationDemo() { const skipLinkRef = useRef<HTMLAnchorElement>(null); return ( <div className="flex min-h-[352px] w-full flex-col"> <SkipNavigation.Root className="w-full text-sm"> <SkipNavigation.List> <SkipNavigation.Item> <SkipNavigation.Link href="#main" ref={skipLinkRef}> Skip to main content </SkipNavigation.Link> </SkipNavigation.Item> <SkipNavigation.Item> <SkipNavigation.Link href="#footer">Skip to footer</SkipNavigation.Link> </SkipNavigation.Item> </SkipNavigation.List> </SkipNavigation.Root> <header className="flex items-center justify-between border-border border-b bg-background px-4 py-3"> <span className="font-semibold">Acme Inc.</span> <nav className="flex gap-4 text-muted-foreground"> <a className="hover:text-foreground" href="#products"> Products </a> <a className="hover:text-foreground" href="#solutions"> Solutions </a> <a className="hover:text-foreground" href="#pricing"> Pricing </a> <a className="hover:text-foreground" href="#docs"> Docs </a> </nav> </header> <main className="relative flex flex-1 scroll-mt-12 flex-col items-center justify-center gap-3 bg-secondary/50 px-4 py-8" id="main" > <span className="absolute top-2 left-2 rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-muted-foreground text-xs"> #main </span> <h2 className="font-semibold text-lg">This is just for practice</h2> <Button onClick={() => skipLinkRef.current?.focus()} variant="outline"> Focus skip links </Button> <p className="text-center text-muted-foreground text-xs"> Then press{' '} <kbd className="rounded border border-border bg-background px-1.5 py-0.5">Tab</kbd> to cycle through them </p> </main> <footer className="relative mt-auto border-border border-t bg-background px-4 py-3 text-muted-foreground" id="footer" > <span className="absolute top-2 left-2 rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-xs"> #footer </span> <p className="text-center">© 2025 Acme Inc. All rights reserved.</p> </footer> </div> ); }

import { mergeProps, useRender } from '@base-ui/react'; import { cn } from '@/lib/utils'; /** * Groups the skip navigation links. * Renders a `<nav>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */ export namespace Root { export type Props = useRender.ComponentProps<'nav'>; } export function Root({ className, render, ...props }: Root.Props) { const defaultProps: useRender.ElementProps<'nav'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation', 'aria-label': 'Skip link navigation', className: cn('', className), }; return useRender({ defaultTagName: 'nav', render, props: mergeProps<'nav'>(defaultProps, props), }); } /** * A list of individual skip navigation links. * Renders a `<ul>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */ export namespace List { export type Props = useRender.ComponentProps<'ul'>; } export function List({ className, render, ...props }: List.Props) { const defaultProps: useRender.ElementProps<'ul'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-list', className: cn('', className), }; return useRender({ defaultTagName: 'ul', render, props: mergeProps<'ul'>(defaultProps, props), }); } /** * An individual skip navigation link. * Renders a `<li>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */ export namespace Item { export type Props = useRender.ComponentProps<'li'>; } export function Item({ className, render, ...props }: Item.Props) { const defaultProps: useRender.ElementProps<'li'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-item', className: cn('', className), }; return useRender({ defaultTagName: 'li', render, props: mergeProps<'li'>(defaultProps, props), }); } /** * A link that can be used to skip navigation. * Renders an `<a>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */ export namespace Link { export type Props = useRender.ComponentProps<'a'>; } export function Link({ className, render, ...props }: Link.Props) { const defaultProps: useRender.ElementProps<'a'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-link', className: cn( 'absolute inset-x-0 top-0 bottom-auto z-50 mx-auto inline-block w-fit -translate-y-[150%] transform rounded-b-md bg-background px-6 py-3 text-foreground text-xl outline-none transition-[translate,color] duration-200 will-change-transform focus:translate-y-0 focus:outline-2 focus:outline-primary/80 focus:outline-solid focus:outline-offset-2', className ), }; return useRender({ defaultTagName: 'a', render, props: mergeProps<'a'>(defaultProps, props), }); }

This is just for practice

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

On this page

Contribute

This is just for practice