PineUiPhoenix.Components.Breadcrumbs (Pine UI v0.2.0)

Shows where the current page sits in the site hierarchy.

<.breadcrumbs>
  <:crumb navigate={~p"/"}>Home</:crumb>
  <:crumb navigate={~p"/settings"}>Settings</:crumb>
  <:crumb current>Billing</:crumb>
</.breadcrumbs>

Summary

Navigation

breadcrumbs(assigns)

Renders a breadcrumb trail.

Accessibility

The trail is wrapped in a labelled <nav> and the crumb marked current carries aria-current="page". Separators are aria-hidden, so a screen reader reads the path as words rather than punctuation.

Attributes

separator (:string) - Glyph drawn between crumbs. Defaults to "chevron". Must be one of "chevron", "slash", or "dot".
label (:string) - Accessible name for the surrounding <nav>. Defaults to "Breadcrumb".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

crumb (required) - Accepts attributes:
- navigate (:string) - A LiveView navigate target.
- patch (:string) - A LiveView patch target.
- href (:string) - A plain href.
- current (:boolean) - Marks the last crumb. Renders as text, not a link.