Skip Nav Link
The Skip Nav Link is an accessibility component that lets keyboard users bypass repetitive navigation to reach main content.
Basic Usage
Skip to main content
Main content
import { SkipLink } from "@paramanu/navigation-react"
export default function App() {return ( <> <SkipLink /> <nav>{/* navigation */}</nav> <main id="main-content">Main content</main> </>)}<a href="#main-content" class="pm-skip-link">Skip to main content</a><nav><!-- navigation --></nav><main id="main-content">Main content</main>Accessibility
- Visually hidden by default, becomes visible on keyboard focus.
- Should be the first focusable element on the page.
- Links to the main content area via
href="#main-content". - WCAG 2.4.1: Bypass Blocks requirement.
Best Practices
- Place at the very top of the page body.
- Use a meaningful target ID matching the main content landmark.
SkipLink Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | "#main-content" | Target element ID |
children | ReactNode | "Skip to main content" | Link text |
CSS Classes
| Class | Description |
|---|---|
pm-skip-link | Root element (visually hidden, visible on focus) |