ion-breadcrumb
A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon.
See the Breadcrumbs documentation for more information.
Interfaces
BreadcrumbCollapsedClickEventDetail
interfaceBreadcrumbCollapsedClickEventDetail{
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}
BreadcrumbCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing .
interfaceBreadcrumbCustomEventextendsCustomEvent{
detail: BreadcrumbCollapsedClickEventDetail;
target: HTMLIonBreadcrumbElement;
}
Properties
active
Description If
true, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to true for the last breadcrumb if it is not set on any. Attribute
active Type
boolean Default
falsecolor
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
undefineddisabled
Description If
true, the user cannot interact with the breadcrumb. Attribute
disabled Type
boolean Default
falsedownload
Description This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attribute
download Type
string | undefined Default
undefinedhref
Description Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute
href Type
string | undefined Default
undefinedmode
Description The mode determines which platform styles to use.
Attribute
mode Type
"ios" | "md" Default
undefinedrel
Description Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute
rel Type
string | undefined Default
undefinedrouterAnimation
Description When using a router, it specifies the transition animation when navigating to another page using
href. Attribute
undefined Type
((baseEl: any, opts?: any) => Animation) | undefined Default
undefinedrouterDirection
Description When using a router, it specifies the transition direction when navigating to another page using
href. Attribute
router-direction Type
"back" | "forward" | "root" Default
'forward'separator
Description If true, show a separator between this breadcrumb and the next. Defaults to
true for all breadcrumbs except the last. Attribute
separator Type
boolean | undefined Default
undefinedtarget
Description Specifies where to display the linked URL. Only applies when an
href is provided. Special keywords: "_blank", "_self", "_parent", "_top". Attribute
target Type
string | undefined Default
undefinedEvents
| Name | Description | Bubbles |
|---|---|---|
ionBlur | Emitted when the breadcrumb loses focus. | true |
ionFocus | Emitted when the breadcrumb has focus. | true |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
collapsed-indicator | The indicator element that shows the breadcrumbs are collapsed. |
native | The native HTML anchor or div element that wraps all child elements. |
separator | The separator element between each breadcrumb. |
CSS Custom Properties
| Name | Description |
|---|---|
--background-focused | Background color of the breadcrumb when focused |
--color | Text color of the breadcrumb |
--color-active | Text color of the active breadcrumb |
--color-focused | Text color of the breadcrumb when focused |
--color-hover | Text color of the breadcrumb on hover |
Slots
No slots available for this component.