BreadcrumbAndroid

Navigation trail with chevron separators, a strong non-interactive current item, and "…" truncation for deep paths

$ npx lumioui add breadcrumb

import { BreadcrumbRoot, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbEllipsis, Breadcrumb } from "@/components/ui/breadcrumb/breadcrumb";

Parts: BreadcrumbRoot · BreadcrumbItem · BreadcrumbSeparator · BreadcrumbEllipsis

Props14

Breadcrumb
items?	BreadcrumbItemData[]	Data-driven trail — last item renders as the current page.
maxItems?	number	Collapse middle items into a "…" button when the trail exceeds this. Default none.
onEllipsisPress?	(hidden: BreadcrumbItemData[]) => void	Fired when the "…" button is pressed, after the trail expands.
haptic?	"selection" \| "light" \| false	Haptic on crumb taps. Default "selection".
children?	React.ReactNode	Compound composition: <Breadcrumb.Item> children, separators auto-inserted.
className?	string
BreadcrumbItem
current?	boolean	Current page — non-interactive, strong text.
onPress?	() => void
accessibilityLabel?	string
children?	React.ReactNode
className?	string
BreadcrumbSeparator
className?	string
BreadcrumbEllipsis
onPress?	() => void
className?	string

Breadcrumb — Collapsedcollapsed.tsx

breadcrumb/variants/collapsed.tsx open

Navigation trail with chevron separators, a strong non-interactive current item, and "…" truncation for deep paths

import { BreadcrumbCollapsed } from "@/components/ui/breadcrumb/variants/collapsed";

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

import * as React from "react";
import { View } from "react-native";
import { Breadcrumb } from "../breadcrumb";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** BreadcrumbCollapsed — deep settings path truncated to Home / … / Parent / Current,
 *  staged as a settings screen header so the trail has context. */
export function BreadcrumbCollapsed() {
  const [note, setNote] = React.useState("Tap … to reveal the full path");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Breadcrumb
            maxItems={3}
            onEllipsisPress={(hidden) => setNote(`Revealed ${hidden.length} hidden levels`)}
            items={[
              { label: "Home", onPress: () => setNote("→ Home") },
              { label: "Settings", onPress: () => setNote("→ Settings") },
              { label: "Accounts", onPress: () => setNote("→ Accounts") },
              { label: "Work", onPress: () => setNote("→ Work") },
              { label: "Notifications" },
            ]}
          />

          <View className="gap-0.5">
            <Text variant="large">Notifications</Text>
            <Text variant="muted">Choose what Work account alerts reach your phone.</Text>
          </View>

          <View className="gap-2 border-t border-border pt-3">
            {["Push alerts", "Weekly digest", "Mentions only"].map((label) => (
              <Glass interactive key={label} curvature="edge" className="flex-row items-center justify-between rounded-xl px-3 py-2.5">
                <Text variant="small">{label}</Text>
                <Icon name="chevron-right" size="sm" color="mutedForeground" />
              </Glass>
            ))}
          </View>

          <Text variant="muted">{note}</Text>
        </Glass>
      </View>
  );
}

Breadcrumb — Full trailtrail.tsx

breadcrumb/variants/trail.tsx open

Navigation trail with chevron separators, a strong non-interactive current item, and "…" truncation for deep paths

import { BreadcrumbTrail } from "@/components/ui/breadcrumb/variants/trail";

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

import * as React from "react";
import { View } from "react-native";
import { Breadcrumb } from "../breadcrumb";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** BreadcrumbTrail — file-browser path, every level tappable. */
export function BreadcrumbTrail() {
  const [path, setPath] = React.useState("Field Guide · Birds · Herons");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Breadcrumb
            items={[
              { label: "Field Guide", onPress: () => setPath("Field Guide") },
              { label: "Birds", onPress: () => setPath("Field Guide · Birds") },
              { label: "Herons" },
            ]}
          />
          <Text variant="muted">Viewing: {path}</Text>
        </Glass>
      </View>
  );
}