# Morph nav

A navigation bar that morphs into rich menus, search, and a compact state as one surface.

- ID: `morph-nav`
- Import: `animui/morph-nav`
- Category: Special
- Runtime exports: `MorphNav`
- Declaration: `types/pro/morph-nav.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: tabs, liquid-tab-bar, dropdown-menu, search-field, popover

```tsx
import { MorphNav } from 'animui/morph-nav';
```

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 morph-nav` 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 MorphNavProps {
  items: { value: string; label: string; href?: string; links?: { label: string; description?: string; icon?: ReactNode; href?: string }[]; columns?: 1 | 2; feature?: ReactNode; footer?: ReactNode }[];
  brand?: { name: string; mark: ReactNode; href?: string };
  action?: { label: string; icon?: ReactNode; href?: string; onClick?: () => void };
  search?: { placeholder?: string; items: { label: string; description?: string; group?: string; icon?: ReactNode; href?: string; keywords?: string }[] };
  current?: string;
  compact?: boolean;
  collapseBelow?: number;
  onNavigate?: (destination: { label: string; href?: string; section?: string }) => void;
  label?: string;
  className?: string;
}

export declare const MorphNav: ComponentType<MorphNavProps>;

export default MorphNav;
```