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
Headless extended
Headless collapsed
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 | "arrows_right" | Name of custom icon used as a divider between breadcrumb items |
| responsive_crumbs_on | sm | md | lg | xl | 2xl | No | - | Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...) |
| list_item_class | css_class | No | - | Additional Tailwind classes |
| divider_class | css_class | No | - | Additional Tailwind classes |
| item | slot | No | - | Items slot |
Breadcrumb.Extended props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id of the component |
| testid | string | No | - | Data-testid attribute for DOM element |
| breadcrumbs | list | No | - | List of crumbs to display - Moon.Design.Breadcrumb.Crumb |
| divider | string | No | - | Name of custom icon used as a divider between breadcrumb items |
| responsive_crumbs_on | sm | md | lg | xl | 2xl | No | - | Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...) |
| divider_class | css_class | No | - | Additional Tailwind classes |
| class | css_class | No | - | Additional Tailwind classes |
| item | slot | No | - | Item slot |
Breadcrumb.Collapsed 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 |
| breadcrumbs | list | No | - | List of crumbs to display - Moon.Design.Breadcrumb.Crumb |
| divider | string | No | "arrows_right" | Name of custom icon used as a divider between breadcrumb items |
| responsive_crumbs_on | sm | md | lg | xl | 2xl | No | - | Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...) |
| divider_class | css_class | No | - | Additional Tailwind classes |
| class | css_class | No | - | Additional Tailwind classes |
| item | slot | No | - | Items slot |
| dropdown | slot | No | - | Dropdown slot for collapsed items |
Breadcrumb.Item props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id of the component |
| testid | string | No | - | Data-testid attribute for DOM element |
| class | css_class | No | - | Additional Tailwind classes |
| divider_class | css_class | No | - | Additional Tailwind classes |
| title | string | No | - | Title of the crumb |
| href | string | No | - | Link to the crumb |
| icon | string | No | - | Icon of the crumb |
| value | integer | No | - | Index of the item in the list of breadcrumbs |
| divider | string | No | - | Name of custom icon used as a divider between breadcrumb items |
| responsive_crumbs_on | string | No | - | Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...) |
| default | slot | No | - | Default slot |
| divider_slot | slot | No | - | Divider slot |
Breadcrumb.Dropdown props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | Yes | - | Id of the component |
| testid | string | No | - | Data-testid attribute for DOM element |
| class | css_class | No | - | Data-testid attribute for DOM element |
| items | list | No | - | List of crumbs to display - Moon.Design.Breadcrumb.Crumb |
| default | slot | No | - | Default slot |
Breadcrumb.Item.Divider props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| testid | string | No | - | Data-testid attribute for DOM element |
| class | css_class | No | - | Additional Tailwind classes |
| value | integer | No | - | Index of the item in the list of breadcrumbs |
| default | slot | No | - | Default slot |