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

Five and more items
Four items
Two items
One item
Icon as starting item and custom divider
Responsive items
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 (...) |