Compact path breadcrumb — layout chrome + file/tree navigation.
Product-app chrome (goprint-style: home icon + chevrons + labels):
<.breadcrumb home="/" items={[
%{label: "Acme", path: "/o/acme"},
%{label: "Tickets", path: nil}
]} />Interactive / S3 explorer (slot API):
<.breadcrumb aria_label="Object path">
<:item navigate="/b">my-bucket</:item>
<:item phx-click="navigate" phx-value-prefix="photos/">photos</:item>
<:item current>2026</:item>
</.breadcrumb>Summary
Functions
Attributes
class(:any) - Extra classes merged onto the root element. Defaults tonil.items(:list) - Optional list of %{label:, path: | nil} maps (alternative to :item slots). Defaults to[].home(:string) - When set, renders a leading home-icon crumb linking here (product chrome). Defaults tonil.separator(:string) - Optional text separator between items. Default is a chevron icon. Defaults tonil.aria_label(:string) - Accessible name for the nav landmark. Defaults to"Breadcrumb".- Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.
Slots
item- One path segment; link, button, or current page. Accepts attributes:current(:boolean) - Mark as the current page (plain text, aria-current).navigate(:string) - LiveView navigate target for this segment.patch(:string) - LiveView patch target for this segment.href(:string) - External or full-page href for this segment.phx-click(:string) - LiveView click event when rendering as a button.phx-value-prefix(:string) - Optional phx-value-prefix for the click event.phx-target(:any) - LiveView target for the click event.