Breadcrumb

Navigation trail showing the current page's location in a hierarchy.

Home/Electronics/Laptops

Web preview — components render natively on iOS & Android

import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function MyScreen() {
return (
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink onPress={() => {}}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink onPress={() => {}}>Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </Breadcrumb>
);
}

Installation

npx @aniui/cli add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function MyScreen() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink onPress={() => {}}>Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

Props

Breadcrumb

PropTypeDefault

children

React.ReactNode

—

className

string

—

BreadcrumbItem

PropTypeDefault

className

string

—

BreadcrumbLink

PropTypeDefault

onPress

() => void

—

children

React.ReactNode

—

className

string

—

Also accepts all Pressable props from React Native.

BreadcrumbPage

PropTypeDefault

children

React.ReactNode

—

className

string

—

BreadcrumbSeparator

PropTypeDefault

children

React.ReactNode

"/"

className

string

—

Accessibility

BreadcrumbLink uses accessibilityRole="link".
BreadcrumbPage uses accessibilityRole="header" to mark the current page.

Source

components/ui/breadcrumb.tsx

import React from "react";
import { View, Text, Pressable } from "react-native";
import { ChevronRight } from "lucide-react-native";
import { cn } from "@/lib/utils";

export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}

export function Breadcrumb({ className, ...props }: BreadcrumbProps) {
  return (
    <View
      className={cn("flex-row flex-wrap items-center gap-1.5", className)}
      accessibilityRole="none"
      {...props}
    />
  );
}

export interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
}

export function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
  return <View className={cn("flex-row items-center gap-1.5", className)} {...props} />;
}

export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
  className?: string;
  children?: React.ReactNode;
}

export function BreadcrumbLink({ className, children, ...props }: BreadcrumbLinkProps) {
  return (
    <Pressable accessibilityRole="link" accessible {...props}>
      <Text className={cn("text-sm text-muted-foreground", className)}>{children}</Text>
    </Pressable>
  );
}

export interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}

export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
  return (
    <Text
      className={cn("text-sm font-medium text-foreground", className)}
      accessibilityRole="header"
      {...props}
    />
  );
}

export interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}

export function BreadcrumbSeparator({ className, children, ...props }: BreadcrumbSeparatorProps) {
  if (children == null) return <ChevronRight size={14} color="#71717a" />;
  return (
    <Text className={cn("text-sm text-muted-foreground", className)} {...props}>
      {children}
    </Text>
  );
}

Previous← Accordion NextCollapsible →