Component Library

Site Navigation Components

3 components for site-wide navigation: Header, Footer, and MegaMenu dropdowns

Header

Smart sticky header with navigation, MegaMenu dropdowns, and theme toggle

Header is fixed at top of page - scroll to see hide/show behavior

Features

✓Smart sticky behavior - hides on scroll down, shows on scroll up
✓Responsive mobile menu with hamburger toggle
✓MegaMenu dropdowns for Products, Industries, Solutions, Resources, Company
✓Theme toggle button (dark/light mode)
✓Request Demo CTA button
✓Keyboard navigation and escape key to close menus
✓Body scroll lock when mobile menu is open

MegaMenu

5 dropdown variants for different navigation needs

Available MegaMenu Types

ProductDropdown

Icon grid layout for product categories with hover effects

@/components/MegaMenu/ProductDropdown

IndustriesDropdown

Tabbed navigation with category icons and sub-items

@/components/MegaMenu/IndustriesDropdown

SolutionsDropdown

Horizontal tabs with multi-column content panels

@/components/MegaMenu/SolutionsDropdown

ResourcesDropdown

Icon list with optional promo card sidebar

@/components/MegaMenu/ResourcesDropdown

CompanyDropdown

Two-column layout with contact CTA footer

@/components/MegaMenu/CompanyDropdown

Footer

Full-width footer with CTA section, navigation links, and social icons

Features

✓CTA section with demo request and contact buttons
✓Multi-column navigation (Product, Industries, Resources, Company, Legal)
✓Social media links with Phosphor icons
✓Copyright bar with dynamic year
✓Responsive grid layout (6 columns on desktop, 2-3 on mobile)

Implementation Notes

Layout Integration

Header and Footer are included in the root layout. Individual pages don't need to import them.

// src/app/layout.tsx
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        <main className="pt-20">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Navigation Data

Menu structure is defined in a JSON file for easy editing.

// Navigation data location
src/content/navigation.json

// Contains:
- logo.text
- megaMenu (product, industries, solutions, resources, company)
- cta (text, href)

Accessibility

All navigation components include proper ARIA attributes, keyboard navigation support, focus management, and screen reader labels.