Skip Navigation Link

  1. Demo
  2. Docu
  3. Full Screen ↗
  • Documentation
  • HTML code
  • Configuration
    •

    Skip Navigation Link

    What it does

    The .skip-link component provides a hidden-by-default anchor that becomes visible when a keyboard user tabs into the page. It lets visitors jump straight to the main content, bypassing repetitive navigation and header elements.

    Key Features

    • Accessible by default: Ensures keyboard and screen-reader users can skip to the main content instantly.
    • Visually hidden until focused: Uses CSS transforms so the link stays out of sight for mouse users.
    • Smooth animated reveal: Transitions into view with a configurable duration and easing curve.
    • Semantic HTML: A plain <a> element with a fragment link — no JavaScript required.

    How to use

    1. Add the skip link

      Place it as the very first focusable element inside <body>: 

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

    2. Mark the target landmark

      Add a matching id to your main content area so the link has somewhere to jump: 

      <main id="main-content">
  <!-- page content -->
</main>

    How it works

    • The link is positioned absolutely and moved off-screen with transform: translateY(-120%).
    • On :focus the transform resets to translateY(0), sliding the link into view.
    • The transition uses the design-token custom properties --duration-moderate and --cubic-bezier-easeInOutCubic for consistent motion across the site.

    Example

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

  <header><!-- site header and navigation --></header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Content starts here.</p>
  </main>
</body>

    Result:

    • Sighted mouse users see nothing extra.
    • A keyboard user pressing Tab on page load sees the skip link slide in at the top; pressing Enter jumps focus to the main content.

    Reference:

    • SCSS partial: src/media/templates/site/jcrafts/scss/base/_root.scss (.skip-link block)
    • Uses CSS custom properties:
      • --duration-moderate (transition duration)
      • --cubic-bezier-easeInOutCubic (transition easing)

    Tip:

    Always place .skip-link as the first focusable element in the DOM so it is the first thing a keyboard user encounters. Make sure the target id (main-content) exists on the page — without it the link has nowhere to go.

    HTML Code (Demo)

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

    Configuration

    Component Config: Navigation/skip-nav-link/skip-nav-link.config.js 
    {}