Laravel Skip Link Component
Free · MITThe first thing a keyboard user reaches — a way past the navigation, straight to the content.
A Skip Link built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::skip-link>
Installation
composer require bluestarsystem/aura-uiUsage
<body>
<x-aura::skip-link href="#main" />
<x-aura::navbar>…</x-aura::navbar>
<x-aura::main id="main">
…
</x-aura::main>
</body>See the full API, props and live examples in the Skip Link documentation.
Overview
Someone navigating by keyboard starts at the top of the document. Without a skip link they tab through every navigation item on every page before reaching what they came for.
<x-aura::skip-link> is invisible until it takes focus, then appears above everything else. It is the single cheapest accessibility improvement most sites can make, and WCAG asks for it: 2.4.1 Bypass Blocks.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href |
string |
'#main' |
The id to jump to, including the #. |
The label defaults to a translated "Skip to main content". Pass a slot to override it:
<x-aura::skip-link href="#content">Skip navigation</x-aura::skip-link>
See more examples and every variant in the Skip Link documentation.