Breadcrumb

The Breadcrumb component displays a hierarchical navigation trail showing the user's current position within an app. It supports links, separators, ellipsis for truncated paths, and a compound component API for flexible customization.

Preview

Installation

npx novaui-cli add breadcrumb

Dependencies

• lucide-react-native >= 0.300

Import

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from 'novaui-components'

Basic Usage

The Breadcrumb is a compound component with these parts:

• Breadcrumb - Root nav container with accessibility role
• BreadcrumbList - Horizontal list of breadcrumb items
• BreadcrumbItem - Individual item container
• BreadcrumbLink - Clickable link for navigable items
• BreadcrumbPage - Non-clickable current page indicator
• BreadcrumbSeparator - Chevron separator between items
• BreadcrumbEllipsis - Ellipsis indicator for collapsed paths

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from 'novaui-components'

export function BasicBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink onPress={() => navigation.navigate('Home')}>
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink onPress={() => navigation.navigate('Components')}>
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

With Ellipsis

Use BreadcrumbEllipsis to truncate long navigation paths:

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink>Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom Separator

Override the default chevron separator with a custom element:

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Text className="text-muted-foreground">/</Text>
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink>Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Text className="text-muted-foreground">/</Text>
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Props API

Breadcrumb Props

Extends React.ComponentPropsWithoutRef<typeof View>:

BreadcrumbList Props

Extends React.ComponentPropsWithoutRef<typeof View>:

BreadcrumbItem Props

Extends React.ComponentPropsWithoutRef<typeof View>:

BreadcrumbLink Props

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

BreadcrumbPage Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

BreadcrumbSeparator Props

Extends React.ComponentPropsWithoutRef<typeof View>:

BreadcrumbEllipsis Props

Extends React.ComponentPropsWithoutRef<typeof View>:

Accessibility

• Root element uses role="navigation" with aria-label="breadcrumb"
• Separators use role="presentation" and aria-hidden={true}
• Current page uses aria-current="page" and aria-disabled={true}

Best Practices

1. Show the full path: Include the root page (Home) and the current page in the trail

2. Use ellipsis for deep paths: If the path exceeds 4-5 levels, collapse middle items with BreadcrumbEllipsis

3. Current page is not a link: Use BreadcrumbPage for the current page — it's non-interactive and styled differently

4. Consistent separators: Stick with one separator style throughout the app — chevron is the standard

5. Don't use for primary navigation: Breadcrumbs supplement, not replace, your main navigation

Related Components

• Use with Button or Pressable for link actions within breadcrumb items
• Combine with page headers for contextual navigation