@dynime/header

Official Dynime Agency Navigation Header & Mega-Menu component for React, Next.js, and modern web applications.

Features the full multi-tier mega-menu architecture:

• Solutions Mega-Menu: 4-column services grid + 35% Services / 35% Client Results & Portfolio / 30% Dynime Ecosystem Platforms (Dynime OS, Dynime AI, Dynihost).
• Industries Mega-Menu: 14 industry sector cards + Sector Solutions overview + 4 company size tiers.
• About Mega-Menu: Dynime Group overview + 4 editorial cards (Leadership, Impact, Ventures, AI Systems).
• Mobile Responsive Drawer: Smooth accordion menus and touch-friendly navigation.
• Framework Agnostic: Works seamlessly with Next.js (next/link), React Router, TanStack Router, Remix, Astro, or standard HTML <a> tags.
• Scroll & Sticky Frost: Transparent at top, frosted glass blur on scroll.

Installation

npm install @dynime/header framer-motion lucide-react
# or
pnpm add @dynime/header framer-motion lucide-react
# or
yarn add @dynime/header framer-motion lucide-react

Quick Start

1. Import CSS & Component

Import the styles in your root layout or main CSS entrypoint:

import '@dynime/header/styles.css';
import { DynimeHeader } from '@dynime/header';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <DynimeHeader />
      <main className="pt-[72px]">{children}</main>
    </>
  );
}

Usage with Next.js (App Router)

To use Next.js's optimized client-side routing, pass Next's Link component and usePathname():

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import '@dynime/header/styles.css';
import { DynimeHeader } from '@dynime/header';

export function NavigationHeader() {
  const pathname = usePathname();

  return (
    <DynimeHeader
      LinkComponent={Link}
      currentPath={pathname}
      logoHref="/"
      consultationHref="/contact"
    />
  );
}

Usage with React Router / TanStack Router / Vite

import { Link, useLocation } from 'react-router-dom';
import '@dynime/header/styles.css';
import { DynimeHeader } from '@dynime/header';

export function AppHeader() {
  const location = useLocation();

  return (
    <DynimeHeader
      LinkComponent={({ href, ...props }) => <Link to={href} {...props} />}
      currentPath={location.pathname}
    />
  );
}

Component Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | variant | 'light' \| 'dark' | 'light' | Header color variant | | currentPath | string | window.location.pathname | Current route path for active state highlighting | | active | string | undefined | Optional manual override for active menu item | | LinkComponent | React.ComponentType<any> | Default <a> | Custom framework router link (e.g. Next.js Link) | | logoSrc | string | Dynime Agency official logo | Image source for the brand logo | | logoHref | string | '/' | Target URL when brand logo is clicked | | consultationHref | string | '/contact' | Primary CTA button URL | | enterpriseHref | string | '/enterprise' | Enterprise link URL | | onNavigate | (path: string) => void | undefined | Callback fired whenever a navigation link is clicked |

Publishing to NPM

To publish this package to NPM under your organization:

1. Log in to NPM:

   npm login

2. Navigate to the package folder:

   cd packages/dynime-header

3. Build the bundle & types:

   npm run build

4. Publish:

   # If scoped package (@dynime/header):
   npm publish --access public
   
   # Or if renamed to unscoped (dynime-header):
   npm publish

License

MIT © Dynime Agency