Skip Link — ARC UI

Components

Skip Link

navigation

interactive

<arc-skip-link>

Overview

Guidelines

When to use

Place SkipLink as the very first focusable element in the page
Point the target at your main content landmark (e.g. #main)
Ensure the target element has tabindex="-1" so it can receive focus
Test by pressing Tab immediately after page load
Include SkipLink on every page for consistent keyboard navigation

When not to use

Hide SkipLink with display:none or visibility:hidden — it must remain focusable
Place SkipLink after other interactive elements — it must be first
Use a target that does not exist on the page
Add multiple SkipLinks unless the page has distinct content regions
Remove SkipLink to "simplify" the UI — it is a WCAG requirement

Features

Invisible by default, revealed only on keyboard focus
Accent-primary filled pill with glow ring when visible
Positioned above all content with fixed/absolute placement
Configurable target selector for the skip destination
Meets WCAG 2.1 Level A Success Criterion 2.4.1
Automatically hides when focus moves away
Works with any ID-based content landmark
Token-driven theming via CSS custom properties

Preview

SkipLink is invisible by default. Press Tab at the top of any page to reveal it.

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<!-- Place as the very first element inside <body> -->
<arc-skip-link target="#main">Skip to main content</arc-skip-link>

<!-- ...header, nav, etc... -->

<main id="main" tabindex="-1">
  <!-- Page content -->
</main>

import { SkipLink } from '@arclux/arc-ui-react';

export function App() {
  return (
    <>
      <SkipLink target="#main">Skip to main content</SkipLink>
      {/* ...header, nav, etc... */}
      <main id="main" tabIndex={-1}>
        {/* Page content */}
      </main>
    </>
  );
}

<script setup>
import { SkipLink } from '@arclux/arc-ui-vue';
</script>

<template>
  <SkipLink target="#main">Skip to main content</SkipLink>
  <!-- ...header, nav, etc... -->
  <main id="main" tabindex="-1">
    <!-- Page content -->
  </main>
</template>

<script>
  import { SkipLink } from '@arclux/arc-ui-svelte';
</script>

<SkipLink target="#main">Skip to main content</SkipLink>
<!-- ...header, nav, etc... -->
<main id="main" tabindex="-1">
  <!-- Page content -->
</main>

import { Component } from '@angular/core';
import { SkipLink } from '@arclux/arc-ui-angular';

@Component({
  imports: [SkipLink],
  template: `
    <SkipLink target="#main">Skip to main content</SkipLink>
    <!-- ...header, nav, etc... -->
    <main id="main" tabindex="-1">
      <!-- Page content -->
    </main>
  `,
})
export class AppComponent {}

import { SkipLink } from '@arclux/arc-ui-solid';

export function App() {
  return (
    <>
      <SkipLink target="#main">Skip to main content</SkipLink>
      {/* ...header, nav, etc... */}
      <main id="main" tabIndex={-1}>
        {/* Page content */}
      </main>
    </>
  );
}

import { SkipLink } from '@arclux/arc-ui-preact';

export function App() {
  return (
    <>
      <SkipLink target="#main">Skip to main content</SkipLink>
      {/* ...header, nav, etc... */}
      <main id="main" tabIndex={-1}>
        {/* Page content */}
      </main>
    </>
  );
}

API

Prop	Type	Default	Description
`target`	`string`	`'#main'`	CSS selector for the element that should receive focus when the skip link is activated. Typically an ID like #main.