# Collapsible Header

Large-title header that shrinks its title into the navigation bar as you scroll, while the bar’s bottom edge appears as content passes beneath it. Can reveal a search field in the compact bar.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/collapsible-header
```

## Import

```tsx
import { CollapsibleHeader } from "@/components/ui/collapsible-header/collapsible-header";
```

## Variants

- `search` — Reveals search: `npx @lumioui/cli add pro/collapsible-header-search`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Large title — collapses to the compact row. |
| `subtitle?` | `string` | Optional line under the large title (expanded area only). |
| `left?` | `React.ReactNode` | Compact row left slot (e.g. a back button). |
| `right?` | `React.ReactNode` | Compact row right slot (e.g. actions). |
| `collapsedContent?` | `React.ReactNode` | Revealed in the compact row once collapsed — replaces the small  title. Keep it ≤40pt tall: the compact row is 44pt. |
| `expandedAccessory?` | `React.ReactNode` | Rendered under the large title inside the expanded block — a search  field or filter row. Scrolls away with  the title; bump `expandedHeight` to fit it. |
| `expandedHeight?` | `number` | Height of the expanded block in px. Default 56 (76 with a subtitle) — fits the 34pt title (+  subtitle); pass more for taller accessories. |
| `scrollY?` | `SharedValue<number>` | External scroll shared value — drive your own scroll view and share  the value, or let the built-in ScrollView write into it. |
| `translucent?` | `boolean` | Translucent header background (bg-background/80) so scrolled content  ghosts through. True blur needs expo-blur — intentionally not used  here to keep the component Expo Go compatible. |
| `scrollable?` | `boolean` | Render the built-in Animated.ScrollView around children.  Default true — set false and pass `scrollY` to wire your own. |
| `children?` | `React.ReactNode` | — |
| `className?` | `string` | — |
| `contentClassName?` | `string` | — |

Source: https://lumioui.com/components/collapsible-header