UtilityLink

Reusable utility navigation link component. Handles both internal and external links.

Props

Prop	Type	Required	Default	Description
`link`	`UtilityNavItem`	Yes	-	Utility navigation link data
`className`	`string`	No	-	CSS classes
`onClick`	`() => void`	No	-	Click handler

Usage

1import { UtilityLink } from '@/components/layout/UtilityLink';
2
3<UtilityLink
4  link={utilityNavItem}
5  className="hover:text-text-default-strong"
6  onClick={() => closeMenu()}
7/>

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

<UtilityLink
  link={utilityNavItem}
  className="hover:text-text-default-strong"
  onClick={() => closeMenu()}
/>

Features

Smart routing: Uses Next.js Link for internal routes, <a> for external
External link handling: Proper target and rel attributes
Simple API: Minimal props for easy reuse

Behavior

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

Notes

Used by AnnouncementBar for utility navigation
Used by MobileNavigation for utility links in drawer
No CSLP support (utility links are typically not editable in Live Preview)
Automatically handles link type detection