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
No slots available for this component.