Skip Nav Link

The Skip Nav Link is an accessibility component that lets keyboard users bypass repetitive navigation to reach main content.

Basic Usage

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)