ion-breadcrumbs
Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.
Basic Usageâ
Using Iconsâ
Icons on Itemsâ
Custom Separatorsâ
Collapsing Itemsâ
Max Itemsâ
If there are more items than the value of maxItems, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
Items Before or After Collapseâ
Once the items are collapsed, the number of items to show can be controlled by the itemsBeforeCollapse and itemsAfterCollapse properties.
Collapsed Indicator Click -- Expand Breadcrumbsâ
Clicking the collapsed indicator will fire the ionCollapsedClick event. This can be used to, for example, expand the breadcrumbs.
Collapsed Indicator Click -- Present Popoverâ
The ionCollapsedClick event can also be used to present an overlay (in this case, an ion-popover) showing the hidden breadcrumbs.
Themingâ
Colorsâ
CSS Custom Propertiesâ
Propertiesâ
colorâ
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" īŊ "dark" īŊ "light" īŊ "medium" īŊ "primary" īŊ "secondary" īŊ "success" īŊ "tertiary" īŊ "warning" īŊ string īŊ undefined |
| Default | undefined |
itemsAfterCollapseâ
| Description | The number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-after-collapse |
| Type | number |
| Default | 1 |
itemsBeforeCollapseâ
| Description | The number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed. |
| Attribute | items-before-collapse |
| Type | number |
| Default | 1 |
maxItemsâ
| Description | The maximum number of breadcrumbs to show before collapsing. |
| Attribute | max-items |
| Type | number īŊ undefined |
| Default | undefined |
modeâ
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" īŊ "md" |
| Default | undefined |
Eventsâ
| Name | Description | Bubbles |
|---|---|---|
ionCollapsedClick | Emitted when the collapsed indicator is clicked on. | true |
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.