SkipNav

A navigation component that allows keyboard and screen reader users to skip repetitive navigation and jump directly to the main content.

Usage

Provides a skip navigation link that is visually hidden until focused via keyboard navigation. When activated, it moves focus to the main content area, allowing users to bypass repetitive navigation elements.

import { SkipNav } from "@elemnts-ui/react"

<SkipNav.Root>
	<SkipNav.Link>Skip to main content</SkipNav.Link>
	<SkipNav.Content>
		{/* Main content */}
	</SkipNav.Content>
</SkipNav.Root>

API Reference

SkipNavRoot

Prop	Type	Default
children	`ReactNode`	-
as	`ArkComponent`	`div`

SkipNavLink

Prop	Type	Default
id	`string`	`"Elemnts-skip-nav"`
children	`ReactNode`	-
as	`ArkComponent`	`a`

SkipNavContent

Prop	Type	Default
id	`string`	`"Elemnts-skip-nav"`
children	`ReactNode`	-
as	`ArkComponent`	`div`