Breadcrumb

A three-step trail reading Home, Components, Breadcrumb, separated by chevrons. The first two are muted links; the last is white and unlinked, because it is the page you are already on.

The trail back up a hierarchy: a row of links ending in the page you are on.

The last crumb is not a link, because you cannot navigate to where you already are. It renders as a plain label marked as current rather than as a dead tappable target.

Separators are the component's job. Breadcrumb.List drops a chevron between the crumbs it holds, so a trail is only its items — there is no separator to forget, and none left dangling at the end.

Installation

Breadcrumb ships with the library — no separate install.

import { Breadcrumb, Text } from 'panelui-native';

Or copy the source into your project, to own and edit it:

npx panelui-cli@latest add breadcrumb

Usage

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={goHome}>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={goProjects}>Projects</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>PanelUI</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Composition

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link>…</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>…</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Breadcrumb.List — The crumb row. Owns the separators — one between every pair of crumbs, none at the ends — and the collapsing, so you only ever list items.
Breadcrumb.Item — One crumb: wraps a link or the current page.
Breadcrumb.Link — A navigable crumb — an ancestor to jump back to. Muted until pressed, and carries the link role.
Breadcrumb.Page — The trailing crumb: where you are now. Not a link, marked aria-current="page", painted in full foreground so the trail resolves to it.
Breadcrumb.Separator — The glyph between crumbs. List inserts it for you and hides it from screen readers; public only for a hand-assembled trail.
Breadcrumb.Ellipsis — Stands in for the crumbs a collapsed trail hides. Static by default; give the list an onEllipsisPress and it becomes the trigger for a menu of the hidden steps.

Examples

A trail

Links back up the tree, then the current page. The chevrons between them are the list's doing, not yours.

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom separator

separator on the root swaps the chevron for any node — a slash, a dot — across every gap at once.

The same trail — Docs, Guides, Theming — with a forward slash in place of each chevron.

<Breadcrumb separator={<Text size="sm" muted>/</Text>}>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Docs</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Guides</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>Theming</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Collapsed

maxItems folds the middle of a deep trail into an ellipsis, keeping the first and last crumbs. Pass onEllipsisPress to make the ellipsis open a menu of the hidden steps.

A long trail shortened to Home, an ellipsis, and Breadcrumb, so a deep path still fits one line.

<Breadcrumb>
  <Breadcrumb.List maxItems={3} onEllipsisPress={() => {}}>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Library</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Dense header

size="sm" tightens the type for a crumb trail sitting in a header bar.

A two-crumb trail, Settings then Billing, at the tighter size a screen header uses.

<Breadcrumb size="sm">
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link onPress={() => {}}>Settings</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Page>Billing</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Variants

`size`

sm
default (default)

<Breadcrumb size="sm">…</Breadcrumb>
<Breadcrumb size="default">…</Breadcrumb>

API Reference

Prop	Type	Default	Description
`className`	`string`	—
`size`	`BreadcrumbSize`	`default`	Text density for every crumb. `sm` for a dense header bar.
`separator`	`ReactNode`	—	The glyph `Breadcrumb.List` places between crumbs. Defaults to a chevron; pass a `<Text>/</Text>`, a slash, or any node to change every gap at once.

Breadcrumb.List

Prop	Type	Default	Description
`className`	`string`	—
`maxItems`	`number`	—	Collapse the trail once it holds more than this many crumbs, so a deep path never wraps into a block of text on a narrow screen. The first `itemsBeforeCollapse` and last `itemsAfterCollapse` survive; the middle folds into a single ellipsis.
`itemsBeforeCollapse`	`number`	`1`	How many leading crumbs to keep when collapsing. Default 1.
`itemsAfterCollapse`	`number`	`1`	How many trailing crumbs to keep when collapsing. Default 1.
`onEllipsisPress`	`() => void`	—	Makes the collapsed ellipsis pressable — the handle for a menu listing the hidden steps. Without it the ellipsis is a static marker.

Breadcrumb.Item

Prop	Type	Default	Description
`className`	`string`	—

Breadcrumb.Link

Prop	Type	Default	Description
`className`	`string`	—
`textClassName`	`string`	—	Text style for the crumb's label.

Breadcrumb.Page

Prop	Type	Default	Description
`className`	`string`	—

Breadcrumb.Separator

Prop	Type	Default	Description
`className`	`string`	—

Breadcrumb.Ellipsis

Prop	Type	Default	Description
`className`	`string`	—

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

You never write separators — Breadcrumb.List inserts a chevron between each crumb. Change the glyph for the whole trail with separator on the root, or for one gap by passing children to a hand-placed Breadcrumb.Separator.

A deep trail on a narrow phone should not wrap into a paragraph. Give the list a maxItems and it keeps the first itemsBeforeCollapse and last itemsAfterCollapse crumbs (both default to 1), folding the middle into a single ellipsis. Hand the list an onEllipsisPress and the ellipsis becomes the handle for a menu of the hidden steps.

Breadcrumb.Ellipsis forwards view props even while static. When it becomes interactive, it still retains ownership of the Show more button name, press feedback, primary handler, and compact classes.

Public exports

Values: Breadcrumb

Types: BreadcrumbProps, BreadcrumbListProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbSeparatorProps, BreadcrumbEllipsisProps