DesktopNavigation

Desktop navigation bar component with logo, search + Ask Dex cluster, and navigation buttons.

Props

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

Usage

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

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

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

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

Features

Sticky header: Sticks to top when scrolling
Logo: Theme-aware logo (dark/light mode)
Search + Ask Dex: Centered cluster — search input and Ask Dex pill with tight spacing (docs-style)
Navigation buttons: Right-aligned navigation links
CSLP support: Individual links support Live Preview
Responsive: Hidden on mobile/tablet (lg:flex)

Layout

Left: Logo (shrink-0)
Center: Search and Ask Dex as one shrink-wrapped unit, centered in the flex space between logo and nav (flex-1 + justify-center)
Right: Navigation buttons (shrink-0, whitespace-nowrap) so links are not squished by the search cluster

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