Skip link

import '@rhds/elements/rh-skip-link/rh-skip-link.js';

<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>

import { SkipLink } from "@rhds/elements/react/rh-skip-link/rh-skip-link.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SkipLink href="#main-content">Skip to main content</SkipLink>
);

import '@rhds/elements/rh-skip-link/rh-skip-link.js';

<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>

<div id="main-content">
  <h1>Skip link</h1>
  <p>To show the skip link, click the white background and press your tab key <a href="#">Link</a>.</p>
</div>

import { SkipLink } from "@rhds/elements/react/rh-skip-link/rh-skip-link.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SkipLink href="#main-content">Skip to main content</SkipLink>
  <div id="main-content">
    <h1>Skip link</h1>
    <p>
      To show the skip link, click the white background and press your tab key
      <a href="#">Link</a>
      .
    </p>
  </div>
);

import '@rhds/elements/rh-skip-link/rh-skip-link.js';

<rh-skip-link>
  <a href="#main-content">Skip to main content</a>
</rh-skip-link>

<h1>Skip link</h1>
<p>To show the skip link, click the white background and press your tab key.</p>

<link rel="stylesheet" href="../rh-skip-link-lightdom-shim.css">

import { SkipLink } from "@rhds/elements/react/rh-skip-link/rh-skip-link.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SkipLink><a href="#main-content">Skip to main content</a></SkipLink>
  <h1>Skip link</h1>
  <p>To show the skip link, click the white background and press your tab key.</p>
  <link rel="stylesheet" href="../rh-skip-link-lightdom-shim.css" />
);