Breadcrumb

Single-line navigation trail with configurable separators and cross-platform mouse, keyboard, focus, and native-link behavior.

Import

import { Breadcrumb } from "silvery"

Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	required	Breadcrumb items from left to right
separator	string	"/"	Default separator before each later item
currentIndex	number	last item	Item styled as the current location
separatorSpacing	"spaced" | "compact"	"spaced"	Whether separators have surrounding spaces
separatorColor	string	"$fg-faint"	Separator color

BreadcrumbItem

interface BreadcrumbItem {
  label: string
  href?: string
  onPress?: () => void
  separator?: string
  color?: string
  bold?: boolean
  revealColor?: string
}

An item is actionable when it has onPress or href. Actionable items enter the focus order and activate with Enter or Space as well as a pointer click. When both are present, onPress owns application activation and href remains the native terminal hyperlink; the two actions are never fired together.

Rendering

The item at currentIndex is bold $fg; other items use $fg-muted. The trail stays one row tall and truncates segments when width is constrained.

Usage

<Breadcrumb
  items={[
    { label: "Home", href: "app://home", onPress: () => navigate("/") },
    { label: "Settings", onPress: () => navigate("/settings") },
    { label: "Profile" },
  ]}
  separator=">"
/>
// Renders: Home > Settings > Profile

See Also

• Tabs -- tabbed navigation