Breadcrumbs
Breadcrumbs is a component that displays the path a user has taken within an application or site. This element displays a hierarchical page layout in which each segment of the Breadcrumb path is a hyperlink, allowing a quick return to previous levels. Breadcrumbs may contain an icon.
Basic usage
Use with icons
Custom separator icon
Collapsible breadcrumb
Maximum number of items
If there are more items in the list than the value of maxItems, the list is collapsed. By default, only the first and last entries are displayed.
Number of items before or after packing
When items are collapsed, the number of items to be displayed can be controlled by adding the itemsBeforeCollapse and itemsAfterCollapse properties.
Drop-down window
Collapsed items can also be displayed as a dropdown using the collapsed-variant property with the value dropdown.
Attributes and Properties
itemsAfterCollapse
| Description | Specifies the value of the maximum number of items displayed after packing |
| Attribute | itemsAfterCollapse |
| Type | number |
| Default | 0 |
itemsBeforeCollapse
| Description | Specifies the value of the maximum number of items displayed before packing |
| Attribute | itemsBeforeCollapse |
| Type | number |
| Default | 0 |
maxItems
| Description | Specifies the value of the maximum number of items displayed in the Breadcrumbs navigation |
| Attribute | maxItems |
| Type | number |
| Default | 0 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
| `` | The main content of the breadcrumbs element. |