Link Component

Custom navigation link component with active state detection and consistent styling. Automatically highlights the current page and provides hover effects.

Various Link States

Active Link State

When the current page matches the link href:

Current Page

Inactive Link State

Default appearance with hover effects:

Other Page

Breadcrumb Navigation

Component Features

  • • Automatic active state detection using page context
  • • Consistent emerald color scheme with site design
  • • Smooth hover transitions and effects
  • • Accessible design with proper contrast ratios
  • • Supports exact match (/) and prefix matching for nested routes
  • • Lightweight and performant implementation
  • • Integrates with Vike page context system