MobileNavigation

Mobile navigation component with hamburger menu and slide-out drawer.

Props

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

Usage

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

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

<MobileNavigation 
  headerData={headerData}
  utilityNavData={utilityLinks}
  showSearch={true}
  linksCslp={linksCslp}
/>

Features

Hamburger menu: Toggle button to open/close menu
Slide-out drawer: Full-height drawer with navigation links
Search bar: Visible on tablet with autocomplete (tab:flex, conditional)
Utility links: Displays utility navigation links
CSLP support: Individual links support Live Preview
Responsive: Only visible on mobile/tablet (lg:hidden)

Behavior

Menu opens/closes with hamburger button click
Icon rotates 90 degrees when open
Drawer slides in from top
Full screen height minus header
Menu closes when link is clicked

CSLP

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

Notes

Client-side component (uses 'use client')
Uses useState for menu open/close state
Navigation buttons filtered by show_this_button flag
Uses NavLink component for navigation links
Uses UtilityLink component for utility links
Links displayed in order: navigation buttons first, then utility links
Autocomplete shows up to five results and includes a link to the full search page