Skip to main content
Version: v6

ion-breadcrumbs

shadow

Contents

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.

Styling

Color Property

CSS Properties

Properties

color

DescriptionThe 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.
Attributecolor
Type"danger" ๏ฝœ "dark" ๏ฝœ "light" ๏ฝœ "medium" ๏ฝœ "primary" ๏ฝœ "secondary" ๏ฝœ "success" ๏ฝœ "tertiary" ๏ฝœ "warning" ๏ฝœ string & Record<never, never> ๏ฝœ undefined
Defaultundefined

itemsAfterCollapse

DescriptionThe number of breadcrumbs to show after the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-after-collapse
Typenumber
Default1

itemsBeforeCollapse

DescriptionThe number of breadcrumbs to show before the collapsed indicator. If itemsBeforeCollapse + itemsAfterCollapse is greater than maxItems, the breadcrumbs will not be collapsed.
Attributeitems-before-collapse
Typenumber
Default1

maxItems

DescriptionThe maximum number of breadcrumbs to show before collapsing.
Attributemax-items
Typenumber ๏ฝœ undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

Events

NameDescription
ionCollapsedClickEmitted when the collapsed indicator is clicked on.

CSS Custom Properties

NameDescription
--backgroundBackground of the breadcrumbs
--colorText color of the breadcrumbs