# Breadcrumb (React Native)

> A sideways-scrolling trail that collapses with the web's rules.

GramproKit for React Native · Display · Beta · Source: https://kit.gramproindia.com/native/docs/breadcrumb

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/breadcrumb). The example's source:

```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

```bash
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](https://kit.gramproindia.com/breadcrumb).