SkipLink

SkipLink belongs near the top of an app shell or document body. It stays out of layout until focused, then lets keyboard and assistive technology users bypass repeated navigation.

#Default usage

<div>
  <SkipLink href="#main-content">Skip to main content</SkipLink>
  <main id="main-content">
    <Text>Primary content target</Text>
  </main>
</div>

#Import

import { SkipLink } from "@froggdesign/enter-ui-react";

#Patterns

Use SkipLink in SaaS shells with sidebars, top bars, filters, or command surfaces before the main dashboard content.

#Accessibility

SkipLink defaults to href="#main-content", is visually hidden until focus, and uses a high-contrast focus treatment. Make sure the target element exists and has the matching id.

#API

• href: target anchor. Defaults to #main-content.
• children: visible label when focused.
• Supports native anchor props and className.

#Styling

SkipLink uses .eui-skip-link classes and FroggDesign tokens for layout, state, focus, and disabled styling.