Breadcrumb for React Native

Web preview — real device may differ

tsx

import { useState } from "react";
import { Text } from "react-native";
import { Breadcrumb } from "@/component-lib/breadcrumb";
import { useKitTheme } from "@/component-lib/shared/native";
import { Section } from "./layout"; // Section and Row: page layout for the demo
 
const TRAIL = [
  { label: "Home", href: "/" },
  { label: "Customers", href: "/customers" },
  { label: "Gramapro India Pvt Ltd", href: "/customers/42" },
  { label: "Invoices", href: "/customers/42/invoices" },
  { label: "INV-2026-0187" },
];
 
export function BreadcrumbDemo() {
  const { tokens } = useKitTheme();
  const [went, setWent] = useState("—");
  return (
    <>
      <Section title="Breadcrumb">
        <Breadcrumb items={TRAIL} onNavigate={(item) => setWent(item.href ?? "")} />
        <Text style={{ color: tokens.muted }}>Navigated to: {went}</Text>
      </Section>
      <Section title="Breadcrumb · collapsed, small">
        <Breadcrumb items={TRAIL} maxItems={3} size="sm" onNavigate={(item) => setWent(item.href ?? "")} />
      </Section>
    </>
  );
}

Install

$ npx @grampro/kit@native add Breadcrumb

Usage

tsx

import { Breadcrumb } from "@/component-lib/breadcrumb";
 
<Breadcrumb
  items={[{ label: "Home", href: "/" }, { label: "Invoices", href: "/invoices" }, { label: "INV-0042" }]}
  onNavigate={(item) => router.push(item.href)}
/>

Props

BreadcrumbProps

Prop	Type	Description
`items` (required)	`readonly BreadcrumbItem[]`	From the top level to the current page. The last item is the current page.
`onNavigate`	`(item: BreadcrumbItem, index: number) => void`	Called when a crumb with an `href` is pressed: navigate with your router, e.g. `(item) => router.push(item.href!)`. A crumb's own `onClick` runs too.
`separator`	`ReactNode`	Between crumbs. Default a chevron.
`maxItems`	`number`	Collapse the middle of the trail when it has more crumbs than this.
`itemsBeforeCollapse`	`number`	Crumbs kept before the collapsed part. Default 1.
`itemsAfterCollapse`	`number`	Crumbs kept after the collapsed part. Default 1.
`size`	`BreadcrumbSize`	Default `md`.
`style`	`StyleProp<ViewStyle>`
`styles`	`Partial<{ list: StyleProp<ViewStyle>; item: StyleProp<ViewStyle>; link: StyleProp<TextS…`
`localeText`	`Partial<BreadcrumbLocaleText>`

Native and web

Navigation is your router's job on mobile: onNavigate receives the crumb.
Web version: Breadcrumb on the web.