Breadcrumb

Aria
RTL

A list of links showing the location of the current page in the navigational hierarchy.

Breadcrumb

Two items

One item

Icon as starting item and custom divider

Breadcrumb props
Name Type Required Default Description
id string Yes - The id of the live component (required by LiveView for stateful components).
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
breadcrumbs list No [] List of crumbs to display - Moon.Design.Breadcrumb.Crumb
collapsible_crumbs integer No 4 Number of visible crumbs. Additional ones collapse for a streamlined view
divider string No - Name of custom icon used as a divider between breadcrumb items
collapsed_icon string No - Name of custom icon used to expand collapsed breadcrumb items
responsive_crumbs_on sm | md | lg | xl | 2xl No - Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...)