# Mega menu morph

A site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.

- ID: `mega-menu-morph`
- Import: `animui/mega-menu-morph`
- Category: Disclosure
- Runtime exports: `MegaMenuMorph`
- Declaration: `types/pro/mega-menu-morph.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: morph-nav, dropdown-menu, site-header, tabs

```tsx
import { MegaMenuMorph } from 'animui/mega-menu-morph';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info mega-menu-morph` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface MegaMenuItem { id: string; label: string; description?: string; href?: string; icon?: ReactNode; }
export interface MegaMenuAction { label: string; href?: string; onClick?: () => void; }
export interface MegaMenuDestination { label: string; href: string; }
export interface MegaMenuMorphProps {
  items?: MegaMenuItem[];
  brand?: { name: string; mark?: ReactNode; href?: string };
  actions?: MegaMenuAction[];
  value?: string | null;
  defaultValue?: string | null;
  onValueChange?: (value: string | null) => void;
  current?: string;
  openDelay?: number;
  closeDelay?: number;
  collapseBelow?: number | "auto";
  showSafeArea?: boolean;
  onNavigate?: (destination: MegaMenuDestination) => void;
  label?: string;
  className?: string;
  style?: CSSProperties;
}

export declare const MegaMenuMorph: ComponentType<MegaMenuMorphProps>;

export default MegaMenuMorph;
```