Home / Components / app-bar

App BariOS

iOS 26-style top navigation bar — translucent glass bar with capsule controls, or a floating island pill; trailing actions union into one liquid group

$ npx lumioui add app-bar

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

Parts: AppBarRoot · AppBarBack · AppBarAction · AppBarTitle

Props22

AppBar
title?	string	Bar title. "small" centers it inline; "large" renders the iOS 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 — iOS convention is 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 iOS 26 pattern where the bar is transparent and 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".
className?	string
AppBarBack
label?	string	Visible label next to the chevron. Default "Back".
onPress?	() => void
haptic?	"light" \| "selection" \| false
className?	string
accessibilityLabel?	string
AppBarAction
haptic?	"light" \| "selection" \| false
className?	string

App Bar — Action rowactions.tsx

app-bar/variants/actions.tsx open

iOS 26-style top navigation bar — translucent glass bar with capsule controls, or a floating island pill; trailing actions union into one liquid group

import { AppBarActions } from "@/components/ui/app-bar/variants/actions";

export function Example() {
  return (
    <AppBarActions />
  );
}

import * as React from "react";
import { View } from "react-native";
import { AppBar } from "../app-bar";
import { Ambient } from "../../glass/ambient";

/** AppBarActions — inline title, back link, and a trailing icon row. */
export function AppBarActions() {
  const [saved, setSaved] = React.useState(false);
  return (
    <View className="relative h-[420px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="app-bar-actions" />
      <AppBar
        translucent
        title="Order #1042"
        subtitle="Arriving 6:45 PM"
        showBack
        backLabel="Orders"
        actions={[
          {
            icon: saved ? "check" : "plus",
            accessibilityLabel: saved ? "Saved to favorites" : "Save order",
            onPress: () => setSaved((v) => !v),
          },
          { icon: "search", accessibilityLabel: "Search orders", onPress: () => {} },
          { icon: "ellipsis", accessibilityLabel: "Order options", onPress: () => {} },
        ]}
      />
    </View>
  );
}

App Bar — Floating islandfloating.tsx

app-bar/variants/floating.tsx open

iOS 26-style top navigation bar — translucent glass bar with capsule controls, or a floating island pill; trailing actions union into one liquid group

import { AppBarFloating } from "@/components/ui/app-bar/variants/floating";

export function Example() {
  return (
    <AppBarFloating />
  );
}

import * as React from "react";
import { View, Text } from "react-native";
import { AppBar } from "../app-bar";
import { Ambient } from "../../glass/ambient";

/** AppBarFloating — the island bar: a glass capsule hovering over the feed,
 *  back + action pills merging into a single liquid group. */
export function AppBarFloating() {
  const [saved, setSaved] = React.useState(false);
  return (
    <View className="relative h-[460px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="city" />
      <AppBar
        floating
        showBack
        backLabel=""
        title="Lisbon"
        actions={[
          {
            icon: saved ? "check" : "heart",
            accessibilityLabel: saved ? "Saved" : "Save place",
            onPress: () => setSaved((v) => !v),
          },
          { icon: "share", accessibilityLabel: "Share", onPress: () => {} },
          { icon: "ellipsis", accessibilityLabel: "More", onPress: () => {} },
        ]}
      />
      <View className="absolute bottom-6 left-4 right-4">
        <Text className="text-xs font-medium uppercase tracking-widest text-white/80">
          Floating chrome
        </Text>
        <Text className="mt-1 text-lg font-semibold text-white">
          The bar hovers — content fills the screen.
        </Text>
      </View>
    </View>
  );
}

App Bar — Large titlelarge-title.tsx

app-bar/variants/large-title.tsx open

iOS 26-style top navigation bar — translucent glass bar with capsule controls, or a floating island pill; trailing actions union into one liquid group

import { AppBarLargeTitle } from "@/components/ui/app-bar/variants/large-title";

export function Example() {
  return (
    <AppBarLargeTitle />
  );
}

import * as React from "react";
import { View } from "react-native";
import { AppBar } from "../app-bar";
import { Image } from "../../image/image";
import { Text } from "../../text/text";
import { Ambient } from "../../glass/ambient";

/** AppBarLargeTitle — iOS large-title header staged over a photo strip so the
 *  bar reads as screen chrome, not a floating card. */
export function AppBarLargeTitle() {
  const [liked, setLiked] = React.useState(false);
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="app-bar-large-title" />
      <AppBar
        translucent
        size="large"
        title="Kyoto at Dusk"
        subtitle="214 photos · April 2025"
        showBack
        backLabel="Albums"
        actions={[
          {
            icon: "heart",
            accessibilityLabel: liked ? "Unlike album" : "Like album",
            onPress: () => setLiked((v) => !v),
          },
          { icon: "share", accessibilityLabel: "Share album", onPress: () => {} },
          { icon: "ellipsis", accessibilityLabel: "More options", onPress: () => {} },
        ]}
      />
      <View className="w-full gap-3 p-4">
        <View className="flex-row gap-2">
          {/* Pinned Unsplash Kyoto shots — torii gates, alley at dusk, street. */}
          {["photo-1493976040374-85c8e12f0c0e", "photo-1528360983277-13d401cdc186", "photo-1545569341-9eb8b30979d9"].map((id) => (
            <Image
              key={id}
              source={{ uri: `https://images.unsplash.com/${id}?w=200&h=200&fit=crop&q=70&auto=format` }}
              rounded="lg"
              className="h-20 flex-1"
              alt="Kyoto photo"
            />
          ))}
        </View>
        <Text variant="muted" className="text-xs text-white drop-shadow">
          Shot on the Kamo river walk — tap a photo to open the lightbox.
        </Text>
      </View>
    </View>
  );
}