Version: v6

ion-breadcrumbs

Usage
Properties
Events
CSS Custom Properties

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.

Usage

Angular
Javascript
React
Stencil
Vue

Default

<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Colors

<ion-breadcrumbs color="secondary">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Breadcrumbs with Icon

<!-- Icon start -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    <ion-icon slot="start" name="home"></ion-icon>
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#files">
    <ion-icon slot="start" name="folder"></ion-icon>
    Files
  </ion-breadcrumb>
  <ion-breadcrumb href="#projects">
    <ion-icon slot="start" name="folder"></ion-icon>
    Projects
  </ion-breadcrumb>
  <ion-breadcrumb href="#user-research">
    <ion-icon slot="start" name="folder"></ion-icon>
    User Research
  </ion-breadcrumb>
  <ion-breadcrumb>
    <ion-icon slot="start" name="document"></ion-icon>
    Survey.txt
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Icon end -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <ion-icon slot="end" name="home"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#files">
    Files
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#projects">
    Projects
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#user-research">
    User Research
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb>
    Survey.txt
    <ion-icon slot="end" name="document"></ion-icon>
  </ion-breadcrumb>
</ion-breadcrumbs>

Custom Separator

<!-- Custom separator text -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Custom separator icon -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Max Items

<!-- Max Items -->
<ion-breadcrumbs [maxItems]="4">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Items Before or After Collapse

<!-- Items before collapse -->
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Items after collapse -->
<ion-breadcrumbs [maxItems]="4" [itemsAfterCollapse]="3">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Items before and after collapse -->
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="0" [itemsAfterCollapse]="3">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Expand on Collapsed Indicator Click

<ion-breadcrumbs [maxItems]="maxBreadcrumbs" (ionCollapsedClick)="expandBreadcrumbs()">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

import { Component } from '@angular/core';

@Component({
  selector: 'breadcrumbs-example',
  templateUrl: 'breadcrumbs-example.html',
  styleUrls: ['./breadcrumbs-example.css'],
})
export class BreadcrumbsExample {
  maxBreadcrumbs = 4;

  expandBreadcrumbs() {
    this.maxBreadcrumbs = undefined;
  }
}

<ion-breadcrumbs [maxItems]="4" (ionCollapsedClick)="presentPopover($event)">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../popover/popover.component';

@Component({
  selector: 'breadcrumbs-example',
  templateUrl: 'breadcrumbs-example.html',
  styleUrls: ['./breadcrumbs-example.css']
})
export class BreadcrumbsExample {
  constructor(public popoverController: PopoverController) {}

  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      componentProps: {
        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
      },
      event: ev
    });
    await popover.present();
  }
}

<ion-content>
  <ion-list>
    <ion-item *ngFor="let breadcrumb of collapsedBreadcrumbs" [href]="breadcrumb.href">
      <ion-label>{{ breadcrumb.textContent }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'popover-component',
})
export class PopoverComponent {
  @Input() collapsedBreadcrumbs: HTMLElement[] = [];

  constructor() {}

}

Default

<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Colors

<ion-breadcrumbs color="secondary">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Breadcrumbs with Icon

<!-- Icon start -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    <ion-icon slot="start" name="home"></ion-icon>
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#files">
    <ion-icon slot="start" name="folder"></ion-icon>
    Files
  </ion-breadcrumb>
  <ion-breadcrumb href="#projects">
    <ion-icon slot="start" name="folder"></ion-icon>
    Projects
  </ion-breadcrumb>
  <ion-breadcrumb href="#user-research">
    <ion-icon slot="start" name="folder"></ion-icon>
    User Research
  </ion-breadcrumb>
  <ion-breadcrumb>
    <ion-icon slot="start" name="document"></ion-icon>
    Survey.txt
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Icon end -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <ion-icon slot="end" name="home"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#files">
    Files
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#projects">
    Projects
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#user-research">
    User Research
    <ion-icon slot="end" name="folder"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb>
    Survey.txt
    <ion-icon slot="end" name="document"></ion-icon>
  </ion-breadcrumb>
</ion-breadcrumbs>

Custom Separator

<!-- Custom separator text -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <span slot="separator">|</span>
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Custom separator icon -->
<ion-breadcrumbs>
  <ion-breadcrumb href="#">
    Home
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
    <ion-icon slot="separator" name="arrow-forward"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Max Items

<!-- Max Items -->
<ion-breadcrumbs max-items="4">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Items Before or After Collapse

<!-- Items before collapse -->
<ion-breadcrumbs max-items="4" items-before-collapse="2">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Items after collapse -->
<ion-breadcrumbs max-items="4" items-after-collapse="3">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

<!-- Items before and after collapse -->
<ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="3">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

Expand on Collapsed Indicator Click

<ion-breadcrumbs max-items="4">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

const breadcrumbs = document.querySelector('ion-breadcrumbs');

breadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs());

function expandBreadcrumbs() {
  breadcrumbs.maxItems = undefined;
}

<ion-breadcrumbs max-items="4">
  <ion-breadcrumb href="#">
    Home
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
    Electronics
  </ion-breadcrumb>
  <ion-breadcrumb href="#photography">
    Photography
  </ion-breadcrumb>
  <ion-breadcrumb href="#cameras">
    Cameras
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Film
  </ion-breadcrumb>
  <ion-breadcrumb>
    35 mm
  </ion-breadcrumb>
</ion-breadcrumbs>

const breadcrumbs = document.querySelector('ion-breadcrumbs');

breadcrumbs.addEventListener('ionCollapsedClick', (ev) => presentPopover(ev));

class ListPopover extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    let breadcrumbTemplate = ``;
    this.collapsedBreadcrumbs.forEach(breadcrumb => {
      breadcrumbTemplate += `
        <ion-item href="${breadcrumb.href}">
          <ion-label>${breadcrumb.textContent}</ion-label>
        </ion-item>
      `;
    })
    this.innerHTML = `
      <ion-content>
        <ion-list>
          ${breadcrumbTemplate}
        </ion-list>
      </ion-content>
    `;
  }
}

customElements.define('list-popover', ListPopover);

async function presentPopover(ev) {
  const popover = Object.assign(document.createElement('ion-popover'), {
    component: 'list-popover',
    componentProps: {
      collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
    },
    event: ev
  });
  document.body.appendChild(popover);

  await popover.present();
}

Default

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';

export const BreadcrumbsExample: React.FC = () => (
  <IonBreadcrumbs>
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Colors

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';

export const BreadcrumbsExample: React.FC = () => (
  <IonBreadcrumbs color="secondary">
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Breadcrumbs with Icon

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react';
import { document, folder, home } from 'ionicons/icons';

export const BreadcrumbsExample: React.FC = () => (
  {/*-- Icon start --*/}
  <IonBreadcrumbs>
    <IonBreadcrumb href="#">
      <IonIcon slot="start" icon={home}></IonIcon>
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#files">
      <IonIcon slot="start" icon={folder}></IonIcon>
      Files
    </IonBreadcrumb>
    <IonBreadcrumb href="#projects">
      <IonIcon slot="start" icon={folder}></IonIcon>
      Projects
    </IonBreadcrumb>
    <IonBreadcrumb href="#user-research">
      <IonIcon slot="start" icon={folder}></IonIcon>
      User Research
    </IonBreadcrumb>
    <IonBreadcrumb>
      <IonIcon slot="start" icon={document}></IonIcon>
      Survey.txt
    </IonBreadcrumb>
  </IonBreadcrumbs>,

  {/*-- Icon end --*/}
  <IonBreadcrumbs>
    <IonBreadcrumb href="#">
      Home
      <IonIcon slot="end" icon={home}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#files">
      Files
      <IonIcon slot="end" icon={folder}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#projects">
      Projects
      <IonIcon slot="end" icon={folder}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#user-research">
      User Research
      <IonIcon slot="end" icon={folder}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb>
      Survey.txt
      <IonIcon slot="end" icon={document}></IonIcon>
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Custom Separator

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react';
import { arrowForward } from 'ionicons/icons';

export const BreadcrumbsExample: React.FC = () => (
  {/*-- Custom separator text --*/}
  <IonBreadcrumbs>
    <IonBreadcrumb href="#">
      Home
      <span slot="separator">|</span>
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
      <span slot="separator">|</span>
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
      <span slot="separator">|</span>
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
      <span slot="separator">|</span>
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
      <span slot="separator">|</span>
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>,

  {/*-- Custom separator icon --*/}
  <IonBreadcrumbs>
    <IonBreadcrumb href="#">
      Home
      <IonIcon slot="separator" icon={arrowForward}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
      <IonIcon slot="separator" icon={arrowForward}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
      <IonIcon slot="separator" icon={arrowForward}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
      <IonIcon slot="separator" icon={arrowForward}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
      <IonIcon slot="separator" icon={arrowForward}></IonIcon>
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Max Items

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';

export const BreadcrumbsExample: React.FC = () => (
  <IonBreadcrumbs maxItems={4}>
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Items Before or After Collapse

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';

export const BreadcrumbsExample: React.FC = () => (
  {/*-- Items before collapse --*/}
  <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={2}>
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>,

  {/*-- Items after collapse --*/}
  <IonBreadcrumbs maxItems={4} itemsAfterCollapse={3}>
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>,

  {/*-- Items before and after collapse --*/}
  <IonBreadcrumbs maxItems={4} itemsBeforeCollapse={0} itemsAfterCollapse={3}>
    <IonBreadcrumb href="#">
      Home
    </IonBreadcrumb>
    <IonBreadcrumb href="#electronics">
      Electronics
    </IonBreadcrumb>
    <IonBreadcrumb href="#photography">
      Photography
    </IonBreadcrumb>
    <IonBreadcrumb href="#cameras">
      Cameras
    </IonBreadcrumb>
    <IonBreadcrumb href="#film">
      Film
    </IonBreadcrumb>
    <IonBreadcrumb>
      35 mm
    </IonBreadcrumb>
  </IonBreadcrumbs>
);

Expand on Collapsed Indicator Click

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';

export const BreadcrumbsExample: React.FC = () => {
  const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4);

  const expandBreadcrumbs = () => {
    setMaxBreadcrumbs(undefined);
  }

  return (
    <IonBreadcrumbs maxItems={maxBreadcrumbs} onIonCollapsedClick={() => expandBreadcrumbs()}>
      <IonBreadcrumb href="#">
        Home
      </IonBreadcrumb>
      <IonBreadcrumb href="#electronics">
        Electronics
      </IonBreadcrumb>
      <IonBreadcrumb href="#photography">
        Photography
      </IonBreadcrumb>
      <IonBreadcrumb href="#cameras">
        Cameras
      </IonBreadcrumb>
      <IonBreadcrumb href="#film">
        Film
      </IonBreadcrumb>
      <IonBreadcrumb>
        35 mm
      </IonBreadcrumb>
    </IonBreadcrumbs>
  );
};

import React from 'react';
import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, useIonPopover } from '@ionic/react';

const PopoverList: React.FC<{
  onHide: () => void;
  collapsedBreadcrumbs: HTMLElement[]
}> = ({ onHide, collapsedBreadcrumbs }) => (
  <IonContent>
    <IonList>
      {collapsedBreadcrumbs.map(breadcrumb => (
        <IonItem href={breadcrumb.href}>
          <IonLabel>{breadcrumb.textContent}</IonLabel>
        </IonItem>
      ))}
    </IonList>
  </IonContent>
);

export const BreadcrumbsExample: React.FC = () => {
  const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });

  return (
    <IonBreadcrumbs maxItems={4} onIonCollapsedClick={(e) => present({ event: e.nativeEvent })}>
      <IonBreadcrumb href="#">
        Home
      </IonBreadcrumb>
      <IonBreadcrumb href="#electronics">
        Electronics
      </IonBreadcrumb>
      <IonBreadcrumb href="#photography">
        Photography
      </IonBreadcrumb>
      <IonBreadcrumb href="#cameras">
        Cameras
      </IonBreadcrumb>
      <IonBreadcrumb href="#film">
        Film
      </IonBreadcrumb>
      <IonBreadcrumb>
        35 mm
      </IonBreadcrumb>
    </IonBreadcrumbs>
  );
};

Default

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      <ion-breadcrumbs>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Colors

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      <ion-breadcrumbs color="secondary">
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Breadcrumbs with Icon

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      // Icon start
      <ion-breadcrumbs>
        <ion-breadcrumb href="#">
          <ion-icon slot="start" name="home"></ion-icon>
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#files">
          <ion-icon slot="start" name="folder"></ion-icon>
          Files
        </ion-breadcrumb>
        <ion-breadcrumb href="#projects">
          <ion-icon slot="start" name="folder"></ion-icon>
          Projects
        </ion-breadcrumb>
        <ion-breadcrumb href="#user-research">
          <ion-icon slot="start" name="folder"></ion-icon>
          User Research
        </ion-breadcrumb>
        <ion-breadcrumb>
          <ion-icon slot="start" name="document"></ion-icon>
          Survey.txt
        </ion-breadcrumb>
      </ion-breadcrumbs>,

      // Icon end
      <ion-breadcrumbs>
        <ion-breadcrumb href="#">
          Home
          <ion-icon slot="end" name="home"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#files">
          Files
          <ion-icon slot="end" name="folder"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#projects">
          Projects
          <ion-icon slot="end" name="folder"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#user-research">
          User Research
          <ion-icon slot="end" name="folder"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb>
          Survey.txt
          <ion-icon slot="end" name="document"></ion-icon>
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Custom Separator

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      // Custom separator text
      <ion-breadcrumbs>
        <ion-breadcrumb href="#">
          Home
          <span slot="separator">|</span>
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
          <span slot="separator">|</span>
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
          <span slot="separator">|</span>
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
          <span slot="separator">|</span>
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
          <span slot="separator">|</span>
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>,

      // Custom separator icon
      <ion-breadcrumbs>
        <ion-breadcrumb href="#">
          Home
          <ion-icon slot="separator" name="arrow-forward"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
          <ion-icon slot="separator" name="arrow-forward"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
          <ion-icon slot="separator" name="arrow-forward"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
          <ion-icon slot="separator" name="arrow-forward"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
          <ion-icon slot="separator" name="arrow-forward"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Max Items

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      <ion-breadcrumbs maxItems={4}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Items Before or After Collapse

import { Component, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  render() {
    return [
      // Items before collapse
      <ion-breadcrumbs maxItems={4} itemsBeforeCollapse={2}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>,

      // Items after collapse
      <ion-breadcrumbs maxItems={4} itemsAfterCollapse={3}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>,

      // Items before and after collapse
      <ion-breadcrumbs maxItems={4} itemsBeforeCollapse={0} itemsAfterCollapse={3}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

Expand on Collapsed Indicator Click

import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  @State() maxBreadcrumbs = 4;

  expandBreadcrumbs() {
    maxBreadcrumbs = undefined;
  }

  render() {
    const { maxBreadcrumbs } = this;

    return [
      <ion-breadcrumbs maxItems={maxBreadcrumbs} onIonCollapsedClick={() => this.expandBreadcrumbs()}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

import { Component, h } from '@stencil/core';

import { popoverController } from '@ionic/core';

@Component({
  tag: 'breadcrumbs-example',
  styleUrl: 'breadcrumbs-example.css'
})
export class BreadcrumbsExample {
  async presentPopover(ev: any) {
    const popover = await popoverController.create({
      component: 'list-popover',
      componentProps: {
        collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
      },
      event: ev
    });
    await popover.present();
  }

  render() {
    return [
      <ion-breadcrumbs maxItems={4} onIonCollapsedClick={(ev) => this.presentPopover(ev)}>
        <ion-breadcrumb href="#">
          Home
        </ion-breadcrumb>
        <ion-breadcrumb href="#electronics">
          Electronics
        </ion-breadcrumb>
        <ion-breadcrumb href="#photography">
          Photography
        </ion-breadcrumb>
        <ion-breadcrumb href="#cameras">
          Cameras
        </ion-breadcrumb>
        <ion-breadcrumb href="#film">
          Film
        </ion-breadcrumb>
        <ion-breadcrumb>
          35 mm
        </ion-breadcrumb>
      </ion-breadcrumbs>
    ];
  }
}

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'list-popover',
  styleUrl: 'list-popover.css',
})
export class ListPopover {
  @Prop() collapsedBreadcrumbs: HTMLElement[] = [];

  render() {
    return [
      <ion-content>
        <ion-list>
          {this.collapsedBreadcrumbs.map(breadcrumb => (
            <ion-item href={breadcrumb.href}>
              <ion-label>{breadcrumb.textContent}</ion-label>
            </ion-item>
          ))}
        </ion-list>
      </ion-content>
    ];
  }
}

Default

<template>
  <ion-breadcrumbs>
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs }
});
</script>

Colors

<template>
  <ion-breadcrumbs color="secondary">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs }
});
</script>

Breadcrumbs with Icon

<template>
  <!-- Icon start -->
  <ion-breadcrumbs>
    <ion-breadcrumb href="#">
      <ion-icon slot="start" :icon="home"></ion-icon>
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#files">
      <ion-icon slot="start" :icon="folder"></ion-icon>
      Files
    </ion-breadcrumb>
    <ion-breadcrumb href="#projects">
      <ion-icon slot="start" :icon="folder"></ion-icon>
      Projects
    </ion-breadcrumb>
    <ion-breadcrumb href="#user-research">
      <ion-icon slot="start" :icon="folder"></ion-icon>
      User Research
    </ion-breadcrumb>
    <ion-breadcrumb>
      <ion-icon slot="start" :icon="document"></ion-icon>
      Survey.txt
    </ion-breadcrumb>
  </ion-breadcrumbs>

  <!-- Icon end -->
  <ion-breadcrumbs>
    <ion-breadcrumb href="#">
      Home
      <ion-icon slot="end" :icon="home"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#files">
      Files
      <ion-icon slot="end" :icon="folder"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#projects">
      Projects
      <ion-icon slot="end" :icon="folder"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#user-research">
      User Research
      <ion-icon slot="end" :icon="folder"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb>
      Survey.txt
      <ion-icon slot="end" :icon="document"></ion-icon>
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/vue';
import { document, folder, home } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
  setup() {
    return { document, folder, home }
  }
});
</script>

Custom Separator

<template>
  <!-- Custom separator text -->
  <ion-breadcrumbs>
    <ion-breadcrumb href="#">
      Home
      <span slot="separator">|</span>
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
      <span slot="separator">|</span>
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
      <span slot="separator">|</span>
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
      <span slot="separator">|</span>
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
      <span slot="separator">|</span>
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>

  <!-- Custom separator icon -->
  <ion-breadcrumbs>
    <ion-breadcrumb href="#">
      Home
      <ion-icon slot="separator" :icon="arrowForward"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
      <ion-icon slot="separator" :icon="arrowForward"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
      <ion-icon slot="separator" :icon="arrowForward"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
      <ion-icon slot="separator" :icon="arrowForward"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
      <ion-icon slot="separator" :icon="arrowForward"></ion-icon>
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/vue';
import { arrowForward } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs, IonIcon },
  setup() {
    return { arrowForward }
  }
});
</script>

Max Items

<template>
  <!-- Max Items -->
  <ion-breadcrumbs :max-items="4">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs }
});
</script>

Items Before or After Collapse

<template>
  <!-- Items before collapse -->
  <ion-breadcrumbs :max-items="4" :items-before-collapse="2">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>

  <!-- Items after collapse -->
  <ion-breadcrumbs :max-items="4" :items-after-collapse="3">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>

  <!-- Items before and after collapse -->
  <ion-breadcrumbs :max-items="4" :items-before-collapse="0" :items-after-collapse="3">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonBreadcrumb, IonBreadcrumbs }
});
</script>

Expand on Collapsed Indicator Click

<template>
  <ion-breadcrumbs :max-items="maxBreadcrumbs" @ionCollapsedClick="expandBreadcrumbs()">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
  setup() {
    const maxBreadcrumbs = ref(4);

    return { maxBreadcrumbs };
  },
  methods: {
    expandBreadcrumbs() {
      maxBreadcrumbs.value = undefined;
    }
  }
});
</script>

<template>
  <ion-breadcrumbs :max-items="4" @ionCollapsedClick="presentPopover($event)">
    <ion-breadcrumb href="#">
      Home
    </ion-breadcrumb>
    <ion-breadcrumb href="#electronics">
      Electronics
    </ion-breadcrumb>
    <ion-breadcrumb href="#photography">
      Photography
    </ion-breadcrumb>
    <ion-breadcrumb href="#cameras">
      Cameras
    </ion-breadcrumb>
    <ion-breadcrumb href="#film">
      Film
    </ion-breadcrumb>
    <ion-breadcrumb>
      35 mm
    </ion-breadcrumb>
  </ion-breadcrumbs>
</template>

<script>
import { IonBadge, IonItem, IonLabel, popoverController } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import ListPopover from './popover.vue';

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
  methods: {
    async presentPopover(ev: Event) {
      const popover = await popoverController.create({
        component: ListPopover,
        componentProps: {
          collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
        },
        event: ev
      });
      await popover.present();
    },
  }
});
</script>

<template>
  <ion-content>
    <ion-list>
      <ion-item v-for="breadcrumb in $props.collapsedBreadcrumbs" :href="breadcrumb.href">
        <ion-label>{{ breadcrumb.textContent }}</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ListPopover',
  props: {
    collapsedBreadcrumbs: { type: Array, default: [] }
  },
  components: { IonContent, IonItem, IonLabel, IonList }
});
</script>

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	`string ｜ undefined`
Default	`undefined`

itemsAfterCollapse

Description	The number of breadcrumbs to show after the collapsed indicator. If this property exists `maxItems` will be ignored.
Attribute	`items-after-collapse`
Type	`number`
Default	`1`

itemsBeforeCollapse

Description	The number of breadcrumbs to show before the collapsed indicator. If this property exists `maxItems` will be ignored.
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
`ionCollapsedClick`	Emitted when the collapsed indicator is clicked on.

CSS Custom Properties

Name	Description
`--background`	Background of the breadcrumbs
`--color`	Text color of the breadcrumbs

Contents

Usage​

Default​

Colors​

Breadcrumbs with Icon​

Custom Separator​

Max Items​

Items Before or After Collapse​

Expand on Collapsed Indicator Click​

Popover on Collapsed Indicator Click​

Default​

Colors​

Breadcrumbs with Icon​

Custom Separator​

Max Items​

Items Before or After Collapse​

Expand on Collapsed Indicator Click​

Popover on Collapsed Indicator Click​

Default​

Colors​

Breadcrumbs with Icon​

Custom Separator​

Max Items​

Items Before or After Collapse​

Expand on Collapsed Indicator Click​

Popover on Collapsed Indicator Click​

Default​

Colors​

Breadcrumbs with Icon​

Custom Separator​

Max Items​

Items Before or After Collapse​

Expand on Collapsed Indicator Click​

Popover on Collapsed Indicator Click​

Default​

Colors​

Breadcrumbs with Icon​

Custom Separator​

Max Items​

Items Before or After Collapse​

Expand on Collapsed Indicator Click​

Popover on Collapsed Indicator Click​

Properties​

color​

itemsAfterCollapse​

itemsBeforeCollapse​

maxItems​

mode​

Events​

CSS Custom Properties​

Usage

Default

Colors

Breadcrumbs with Icon

Custom Separator

Max Items

Items Before or After Collapse

Expand on Collapsed Indicator Click

Popover on Collapsed Indicator Click

Default

Colors

Breadcrumbs with Icon

Custom Separator

Max Items

Items Before or After Collapse

Expand on Collapsed Indicator Click

Popover on Collapsed Indicator Click

Default

Colors

Breadcrumbs with Icon

Custom Separator

Max Items

Items Before or After Collapse

Expand on Collapsed Indicator Click

Popover on Collapsed Indicator Click

Default

Colors

Breadcrumbs with Icon

Custom Separator

Max Items

Items Before or After Collapse

Expand on Collapsed Indicator Click

Popover on Collapsed Indicator Click

Default

Colors

Breadcrumbs with Icon

Custom Separator

Max Items

Items Before or After Collapse

Expand on Collapsed Indicator Click

Popover on Collapsed Indicator Click

Properties

color

itemsAfterCollapse

itemsBeforeCollapse

maxItems

mode

Events

CSS Custom Properties