Breadcrumb
Aria
RTL
A list of links showing the location of the current page in the navigational hierarchy.
![Breadcrumb](/moon/assets/images/facing/components/breadcrumb.png)
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 |