Breadcrumb

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

Home/Components/Breadcrumb

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.

Previous← Bottom Sheet NextButton →