Breadcrumbs
Breadcrumbs are a navigational aid that shows the path to the current page within the website's hierarchy.
They help users understand their location in the site and navigate back to previous pages easily. Breadcrumbs are especially useful in websites with multiple layers of content, enhancing usability by providing a clear and efficient way to backtrack.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Breadcrumbs
[{"title":"Step 1","subtitle":"Subtitle 1"},{"title":"Step 2","subtitle":"Subtitle 2"},{"title":"Step 3","subtitle":"Subtitle 3"}]
Separators
Property
Value
Breadcrumbs
[{"title":"Step 1","subtitle":"Subtitle 1"},{"title":"Step 2","subtitle":"Subtitle 2"},{"title":"Step 3","subtitle":"Subtitle 3"}]
Separator type
ArrowForwardIos
Sizes
Property
Value
Breadcrumbs
[{"title":"Step 1","subtitle":"Subtitle 1"},{"title":"Step 2","subtitle":"Subtitle 2"},{"title":"Step 3","subtitle":"Subtitle 3"}]
Size
LARGE
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Size
The size of the crumbs.
Medium
String
Separator type
The type of separator to use.
String
Breadcrumbs
An array representing the breadcrumb trail.
Array