NavLink

Reusable navigation link component with CSLP support. Handles both internal and external links.

Props

Prop	Type	Required	Default	Description
`button`	`NavButton`	Yes	-	Navigation button data
`index`	`number`	Yes	-	Index for CSLP key generation
`linksCslp`	`{ links?: CSLPFieldMapping }`	No	-	CSLP mapping for links
`className`	`string`	No	-	CSS classes
`onClick`	`() => void`	No	-	Click handler

Usage

1import { NavLink } from '@/components/layout/NavLink';
2
3<NavLink
4  button={navButton}
5  index={0}
6  linksCslp={linksCslp}
7  className="hover:text-text-default-strong"
8  onClick={() => closeMenu()}
9/>

import { NavLink } from '@/components/layout/NavLink';

<NavLink
  button={navButton}
  index={0}
  linksCslp={linksCslp}
  className="hover:text-text-default-strong"
  onClick={() => closeMenu()}
/>

Features

Smart routing: Uses Next.js Link for internal routes, <a> for external
CSLP support: Applies CSLP attributes to individual links
External link handling: Proper target and rel attributes
Accessibility: Supports test IDs and click handlers

CSLP

CSLP key pattern: links__${index} (e.g., links__0, links__1)
CSLP attributes only applied in preview mode
Extracted from linksCslp.links[links__${index}]

Behavior

Returns null if href is missing or '#'
Detects external links by checking if href starts with 'http'
Applies target and rel attributes for external links
Uses Next.js Link component for internal navigation

Notes

Used by DesktopNavigation and MobileNavigation
Handles CSLP attribute spreading
Supports both server and client-side rendering
Automatically handles link type detection