# App Bar

Top navigation bar that can follow your scroll: its background and edge fade in as content passes underneath, titles swap smoothly, and a floating style frosts over. Includes a large-title style.

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

## Install

```bash
npx @lumioui/cli add app-bar
```

## Import

```tsx
import { AppBarRoot, AppBarBack, AppBarAction, AppBarTitle, AppBar } from "@/components/ui/app-bar/app-bar";
```

## Variants

- `actions` — Action row: `npx @lumioui/cli add app-bar-actions`
- `floating` — Floating island: `npx @lumioui/cli add app-bar-floating`
- `large-title` — Large title: `npx @lumioui/cli add app-bar-large-title`

## Props

### AppBar

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` | Bar title. "small" centers it inline; "large" renders a large title below the row. |
| `subtitle?` | `string` | Secondary line under the centered title (small mode only). |
| `size?` | `"small" | "large"` | "small" = classic inline bar; "large" = large-title header. Default "small". |
| `showBack?` | `boolean` | Show a back chevron + label on the leading edge. |
| `backLabel?` | `string` | Label next to the back chevron — conventionally the previous screen's title. Default "Back". |
| `onBack?` | `() => void` | — |
| `leading?` | `React.ReactNode` | Leading slot — overrides the back button when set. |
| `actions?` | `AppBarActionItem[]` | Trailing action icon buttons. |
| `trailing?` | `React.ReactNode` | Trailing slot — overrides `actions` when set. |
| `safeArea?` | `boolean` | Pad for the status bar. Default true. |
| `bordered?` | `boolean` | Bottom hairline. Default true. |
| `translucent?` | `boolean` | Translucent bar: edge-to-edge glass material for content scrolling  underneath, and the bar's buttons wear glass capsules — the bar is  transparent and the controls carry the glass.  Adjacent trailing actions union into one pill. |
| `floating?` | `boolean` | Floating capsule bar — the bar detaches into a rounded glass capsule  hovering over the content (island bar). Implies translucent. |
| `haptic?` | `"light" | "selection" | false` | Haptic on button presses. Default "light". |
| `scrollY?` | `SharedValue<number>` | Scroll offset of the content under the bar. When passed, light follows  scroll: the surface, its frost and the bottom hairline are clear at rest  and fully on by 24pt (floating capsules sharpen instead). Drive it from  `useAnimatedScrollHandler` — it is read on the UI thread. |
| `className?` | `string` | — |

### AppBarBack

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Visible label next to the chevron. Default "Back". |
| `tone?` | `AppBarTone` | Chevron + label tint. Default "primary"; glass bars pass "foreground". |
| `onPress?` | `() => void` | — |
| `haptic?` | `"light" | "selection" | false` | — |
| `className?` | `string` | — |
| `accessibilityLabel?` | `string` | — |

### AppBarAction

| Prop | Type | Notes |
| --- | --- | --- |
| `haptic?` | `"light" | "selection" | false` | — |
| `tone?` | `AppBarTone` | Icon tint. Default "primary"; glass bars pass "foreground". |
| `className?` | `string` | — |

## Icons rendered

- `share` — /icons.html?i=share
- `chevron-left` — /icons.html?i=chevron-left

Source: https://lumioui.com/components/app-bar