PUI.Breadcrumb

Copy Markdown

PUI.Breadcrumb renders accessible navigation for hierarchical pages while leaving URL generation and navigation mode to the host application.

Usage

<.breadcrumb>
  <.breadcrumb_list>
    <.breadcrumb_item>
      <.breadcrumb_link navigate={~p"/projects"}>Projects</.breadcrumb_link>
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_page>Website refresh</.breadcrumb_page>
    </.breadcrumb_item>
  </.breadcrumb_list>
</.breadcrumb>

The current page renders aria-current="page". Ancestor links accept the normal Phoenix href, navigate, and patch attributes.

Custom separator

<.breadcrumb_separator>
  <span class="text-muted-foreground">/</span>
</.breadcrumb_separator>

The default separator uses the :chevron_right semantic icon token and is therefore provider-agnostic.

Collapsed paths

Use breadcrumb_ellipsis/1 when a long path needs to hide intermediate items:

<.breadcrumb_ellipsis />

Customization

Every primitive accepts class. The outer navigation and list/item primitives also forward global HTML attributes, so applications can add test IDs and additional accessibility metadata without changing the component markup.