A Material Design breadcrumb trail (pp_breadcrumbs/1), in the spirit of MUI's Breadcrumbs — a horizontal list of :items with a separator automatically inserted between them.

<.pp_breadcrumbs>
  <:item navigate={~p"/"}>Home</:item>
  <:item navigate={~p"/catalog"}>Catalog</:item>
  <:item>Current product</:item>
</.pp_breadcrumbs>

Each :item renders as a Phoenix.Component.link/1 when it has an href/navigate/patch, or as plain aria-current="page" text otherwise — the exact same "conditional root tag" convention PhoenixPaper.ListItem uses (see AGENTS.md), and just like ListItem, which item is "current" isn't detected by position (it's not always assumed to be the last one) — this is a stateless function component with no knowledge of the current request, so it's simply whichever :item you leave without a link. Every one of MUI's own docs examples follows that same convention (only the last child is plain Typography, every other one is a Link), so this isn't a departure from upstream, just made explicit.

separator is a slot, not a string attr, so it can hold anything MUI's own separator prop can — an icon, not just text:

<.pp_breadcrumbs>
  <:separator><.pp_icon name="hero-chevron-right" class="size-4" /></:separator>
  <:item navigate={~p"/"}>Home</:item>
  <:item>Settings</:item>
</.pp_breadcrumbs>

omit it for MUI's plain "/" default.

Collapsing (max_items)

Beyond max_items items (default 8, matching MUI), the trail collapses to items_before_collapse (default 1) + an ellipsis + items_after_collapse (default 1), with a click on the ellipsis expanding to the full list — pure CSS, no JS/LiveView, the same hidden-checkbox-plus-peer-checked: trick PhoenixPaper.Accordion/PhoenixPaper.Drawer use. Unlike those, the checkbox's id is generated internally (via System.unique_integer/1) rather than caller-supplied: nothing outside this component ever needs to reference it, unlike Accordion's id (shared with AccordionSummary/ Details/Actions) or Drawer's (referenced by an external pp_drawer_toggle). Both the collapsed and the fully-expanded <ol> are always rendered (one hidden via peer-checked:hidden/peer-checked:flex swapping which is visible) — the same "always in the DOM, toggle visibility" trade-off as Dialog, needed because there's no JS here to swap markup after the fact. Once expanded, there's no way back to collapsed — like a checked radio (see Accordion's moduledoc), a checked checkbox can't be unchecked by clicking a label pointing at it again; MUI's own JS-driven version has the same one-way limitation for the same reason (there's no "re-collapse" affordance in their demo either, only page navigation resets it).