DesktopNavigation

Desktop navigation bar component with logo, search, and navigation buttons.

Props

Prop	Type	Required	Default	Description
`headerData`	`HeaderData`	Yes	-	Header configuration data
`showSearch`	`boolean`	No	`true`	Whether to show search bar
`linksCslp`	`{ links?: CSLPFieldMapping }`	No	-	CSLP mapping for navigation links

Usage

1import { DesktopNavigation } from '@/components/layout/DesktopNavigation';
2
3<DesktopNavigation 
4  headerData={headerData}
5  showSearch={true}
6  linksCslp={linksCslp}
7/>

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

<DesktopNavigation 
  headerData={headerData}
  showSearch={true}
  linksCslp={linksCslp}
/>

Features

Sticky header: Sticks to top when scrolling
Logo: Theme-aware logo (dark/light mode)
Search bar: Centered search input with autocomplete (conditional)
Navigation buttons: Right-aligned navigation links
CSLP support: Individual links support Live Preview
Responsive: Hidden on mobile/tablet (lg:flex)

Layout

Left: Logo (hidden on mobile, visible md+)
Center: Search bar with autocomplete dropdown (hidden on mobile, visible md+, conditional)
Right: Navigation buttons (hidden on mobile, visible md+)
Uses a three-column grid (1fr / auto / 1fr) to keep the search bar visually centered as logo or nav widths load.

CSLP

Individual navigation links receive CSLP via linksCslp.links__${index} pattern
CSLP attributes only applied in preview mode
Uses NavLink component for link rendering

Notes

Only visible on large screens (lg breakpoint and up)
Uses HeaderData type for configuration
Navigation buttons filtered by show_this_button flag
Uses NavLink component for consistent link rendering
Supports external links with proper target/rel attributes
Autocomplete shows up to five results and includes a link to the full search page