PUI.Breadcrumb (pui v1.0.0)

Copy Markdown

Accessible breadcrumb navigation primitives.

Breadcrumbs describe the current location without owning routing. Links accept normal Phoenix href, navigate, and patch attributes, so the host application controls navigation and URL generation.

Example

<.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>

Components

ComponentAttributesDescription
breadcrumb/1aria_label, class, global attributesNavigation landmark
breadcrumb_list/1classOrdered breadcrumb list
breadcrumb_item/1classOne breadcrumb item
breadcrumb_link/1class, href, navigate, patchNavigable ancestor
breadcrumb_page/1classCurrent page with aria-current
breadcrumb_separator/1classCustomizable separator
breadcrumb_ellipsis/1classCollapsed breadcrumb indicator

Application-specific separators can be supplied through the separator's inner_block slot. The default uses the provider-agnostic :chevron_right icon token.

Summary

Functions