Breadcrumb

<afp-breadcrumb>

Since 1.4.0

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A breadcrumb navigation component that provides hierarchical navigation context.

Home

Products

Electronics

Smartphones

<afp-breadcrumb>
  <afp-breadcrumb-item href="/">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products/electronics" target="_blank">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item>Smartphones</afp-breadcrumb-item>
</afp-breadcrumb>

<afp-breadcrumb>
  <afp-breadcrumb-item [href]="'/'">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products'">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products/electronics'" [target]="'_blank'">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item>Smartphones</afp-breadcrumb-item>
</afp-breadcrumb>

<AfpBreadcrumb>
  <AfpBreadcrumbItem href="/">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products/electronics" target="_blank">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>Smartphones</AfpBreadcrumbItem>
</AfpBreadcrumb>

<AfpBreadcrumb>
  <AfpBreadcrumbItem :href="'/'">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products'">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products/electronics'" :target="'_blank'">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>Smartphones</AfpBreadcrumbItem>
</AfpBreadcrumb>

Examples #

Max Items #

Use maxItems (maxitems) property to limit the number of visible items to prevent overflow.

<div class="afp-stack">
  <afp-breadcrumb id="breadcrumb-maxItems" maxitems="4">
    <afp-breadcrumb-item href="/">Home</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/level1">Level 1</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/level1/level2">Level 2</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/level1/level2/level3">Level 3</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/level1/level2/level3/level4">Level 4</afp-breadcrumb-item>
    <afp-breadcrumb-item>Current Page</afp-breadcrumb-item>
  </afp-breadcrumb>
  <div class="afp-cluster afp-gap-xs">
    <afp-button id="dash" shape="pill" appearance="filled"><afp-icon name="dash"></afp-icon></afp-button>
    <afp-button id="plus" shape="pill" appearance="filled"><afp-icon name="plus"></afp-icon></afp-button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('breadcrumb-maxItems');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
       if (currentValue < 5) {
        breadcrumb.maxItems = Number(currentValue + 1);
        }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
      if (currentValue > 3) {
        breadcrumb.maxItems = Number(currentValue - 1);
      }
    });
  });
</script>

<div class="afp-stack">
  <afp-breadcrumb [id]="'breadcrumb-maxItems'" [maxitems]=4>
    <afp-breadcrumb-item [href]="'/'">Home</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/level1'">Level 1</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/level1/level2'">Level 2</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/level1/level2/level3'">Level 3</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/level1/level2/level3/level4'">Level 4</afp-breadcrumb-item>
    <afp-breadcrumb-item>Current Page</afp-breadcrumb-item>
  </afp-breadcrumb>
  <div class="afp-cluster afp-gap-xs">
    <afp-button [id]="'dash'" [shape]="'pill'" [appearance]="'filled'"><afp-icon [name]="'dash'"></afp-icon></afp-button>
    <afp-button [id]="'plus'" [shape]="'pill'" [appearance]="'filled'"><afp-icon [name]="'plus'"></afp-icon></afp-button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('breadcrumb-maxItems');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
       if (currentValue < 5) {
        breadcrumb.maxItems = Number(currentValue + 1);
        }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
      if (currentValue > 3) {
        breadcrumb.maxItems = Number(currentValue - 1);
      }
    });
  });
</script>

<div class="afp-stack">
  <AfpBreadcrumb id="breadcrumb-maxItems" maxitems="4">
    <AfpBreadcrumbItem href="/">Home</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/level1">Level 1</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/level1/level2">Level 2</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/level1/level2/level3">Level 3</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/level1/level2/level3/level4">Level 4</AfpBreadcrumbItem>
    <AfpBreadcrumbItem>Current Page</AfpBreadcrumbItem>
  </AfpBreadcrumb>
  <div class="afp-cluster afp-gap-xs">
    <AfpButton id="dash" shape="pill" appearance="filled"><AfpIcon name="dash"></AfpIcon></AfpButton>
    <AfpButton id="plus" shape="pill" appearance="filled"><AfpIcon name="plus"></AfpIcon></AfpButton>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('breadcrumb-maxItems');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
       if (currentValue < 5) {
        breadcrumb.maxItems = Number(currentValue + 1);
        }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
      if (currentValue > 3) {
        breadcrumb.maxItems = Number(currentValue - 1);
      }
    });
  });
</script>

<div class="afp-stack">
  <AfpBreadcrumb :id="'breadcrumb-maxItems'" :maxitems=4>
    <AfpBreadcrumbItem :href="'/'">Home</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/level1'">Level 1</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/level1/level2'">Level 2</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/level1/level2/level3'">Level 3</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/level1/level2/level3/level4'">Level 4</AfpBreadcrumbItem>
    <AfpBreadcrumbItem>Current Page</AfpBreadcrumbItem>
  </AfpBreadcrumb>
  <div class="afp-cluster afp-gap-xs">
    <AfpButton :id="'dash'" :shape="'pill'" :appearance="'filled'"><AfpIcon :name="'dash'"></AfpIcon></AfpButton>
    <AfpButton :id="'plus'" :shape="'pill'" :appearance="'filled'"><AfpIcon :name="'plus'"></AfpIcon></AfpButton>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('breadcrumb-maxItems');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
       if (currentValue < 5) {
        breadcrumb.maxItems = Number(currentValue + 1);
        }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = breadcrumb.maxItems;
      if (currentValue > 3) {
        breadcrumb.maxItems = Number(currentValue - 1);
      }
    });
  });
</script>

Expand #

Use collapseBehavior (collapsebehavior) property to determine the behavior of the ellipsis, When collapsebehavior="expand", clicking on the ellipsis expands all breadcrumb items inline, as if no maxItems was set.

Reset / Collapse

<div class="afp-stack">
  <afp-breadcrumb id="expand-breadcrumb" maxItems="3" collapsebehavior="expand">
    <afp-breadcrumb-item href="/">Home</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/products">Products</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/products/electronics">Electronics</afp-breadcrumb-item>
    <afp-breadcrumb-item href="/products/electronics/phones">Phones</afp-breadcrumb-item>
    <afp-breadcrumb-item>iPhone 15</afp-breadcrumb-item>
  </afp-breadcrumb>
  <afp-button id="collapse-btn" appearance="filled">Reset / Collapse</afp-button>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('expand-breadcrumb');
    const collapseBtn = document.getElementById('collapse-btn');
    
    collapseBtn.addEventListener('afp-click', () => {
      breadcrumb.collapse();
    });
  });
</script>

<div class="afp-stack">
  <afp-breadcrumb [id]="'expand-breadcrumb'" maxItems="3" [collapsebehavior]="'expand'">
    <afp-breadcrumb-item [href]="'/'">Home</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/products'">Products</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/products/electronics'">Electronics</afp-breadcrumb-item>
    <afp-breadcrumb-item [href]="'/products/electronics/phones'">Phones</afp-breadcrumb-item>
    <afp-breadcrumb-item>iPhone 15</afp-breadcrumb-item>
  </afp-breadcrumb>
  <afp-button [id]="'collapse-btn'" [appearance]="'filled'">Reset / Collapse</afp-button>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('expand-breadcrumb');
    const collapseBtn = document.getElementById('collapse-btn');
    
    collapseBtn.addEventListener('afp-click', () => {
      breadcrumb.collapse();
    });
  });
</script>

<div class="afp-stack">
  <AfpBreadcrumb id="expand-breadcrumb" maxItems="3" collapsebehavior="expand">
    <AfpBreadcrumbItem href="/">Home</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/products">Products</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/products/electronics">Electronics</AfpBreadcrumbItem>
    <AfpBreadcrumbItem href="/products/electronics/phones">Phones</AfpBreadcrumbItem>
    <AfpBreadcrumbItem>iPhone 15</AfpBreadcrumbItem>
  </AfpBreadcrumb>
  <AfpButton id="collapse-btn" appearance="filled">Reset / Collapse</AfpButton>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('expand-breadcrumb');
    const collapseBtn = document.getElementById('collapse-btn');
    
    collapseBtn.addEventListener('afp-click', () => {
      breadcrumb.collapse();
    });
  });
</script>

<div class="afp-stack">
  <AfpBreadcrumb :id="'expand-breadcrumb'" maxItems="3" :collapsebehavior="'expand'">
    <AfpBreadcrumbItem :href="'/'">Home</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/products'">Products</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/products/electronics'">Electronics</AfpBreadcrumbItem>
    <AfpBreadcrumbItem :href="'/products/electronics/phones'">Phones</AfpBreadcrumbItem>
    <AfpBreadcrumbItem>iPhone 15</AfpBreadcrumbItem>
  </AfpBreadcrumb>
  <AfpButton :id="'collapse-btn'" :appearance="'filled'">Reset / Collapse</AfpButton>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const breadcrumb = document.getElementById('expand-breadcrumb');
    const collapseBtn = document.getElementById('collapse-btn');
    
    collapseBtn.addEventListener('afp-click', () => {
      breadcrumb.collapse();
    });
  });
</script>

When collapseBehavior="dropdown", clicking on the ellipsis shows a dropdown menu containing the collapsed breadcrumb items.

Home

Products

Electronics

Phones

iPhone 15

<afp-breadcrumb maxItems="3" collapseBehavior="dropdown">
  <afp-breadcrumb-item href="/">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products/electronics">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products/electronics/phones">Phones</afp-breadcrumb-item>
  <afp-breadcrumb-item>iPhone 15</afp-breadcrumb-item>
</afp-breadcrumb>

<afp-breadcrumb maxItems="3" collapseBehavior="dropdown">
  <afp-breadcrumb-item [href]="'/'">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products'">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products/electronics'">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products/electronics/phones'">Phones</afp-breadcrumb-item>
  <afp-breadcrumb-item>iPhone 15</afp-breadcrumb-item>
</afp-breadcrumb>

<AfpBreadcrumb maxItems="3" collapseBehavior="dropdown">
  <AfpBreadcrumbItem href="/">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products/electronics">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products/electronics/phones">Phones</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>iPhone 15</AfpBreadcrumbItem>
</AfpBreadcrumb>

<AfpBreadcrumb maxItems="3" collapseBehavior="dropdown">
  <AfpBreadcrumbItem :href="'/'">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products'">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products/electronics'">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products/electronics/phones'">Phones</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>iPhone 15</AfpBreadcrumbItem>
</AfpBreadcrumb>

Prefix and Suffix #

Using the prefix and suffix slots of the breadcrumb items.

Home

Dashboard

Settings

<afp-breadcrumb>
  <afp-breadcrumb-item href="/">
    <afp-icon slot="prefix" name="house"></afp-icon>
    <afp-icon slot="separator" name="arrow-right"></afp-icon>
    Home
  </afp-breadcrumb-item>
  <afp-breadcrumb-item href="/dashboard">
    <afp-icon slot="prefix" name="kanban"></afp-icon>
    <afp-icon slot="suffix" name="activity"></afp-icon>
    <afp-icon slot="separator" name="arrow-right"></afp-icon>
    Dashboard
  </afp-breadcrumb-item>
  <afp-breadcrumb-item>
    <afp-icon slot="separator" name="arrow-right"></afp-icon>
    <afp-icon slot="prefix" name="gear"></afp-icon>
    Settings
  </afp-breadcrumb-item>
</afp-breadcrumb>

<afp-breadcrumb>
  <afp-breadcrumb-item [href]="'/'">
    <afp-icon [slot]="'prefix'" [name]="'house'"></afp-icon>
    <afp-icon [slot]="'separator'" [name]="'arrow-right'"></afp-icon>
    Home
  </afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/dashboard'">
    <afp-icon [slot]="'prefix'" [name]="'kanban'"></afp-icon>
    <afp-icon [slot]="'suffix'" [name]="'activity'"></afp-icon>
    <afp-icon [slot]="'separator'" [name]="'arrow-right'"></afp-icon>
    Dashboard
  </afp-breadcrumb-item>
  <afp-breadcrumb-item>
    <afp-icon [slot]="'separator'" [name]="'arrow-right'"></afp-icon>
    <afp-icon [slot]="'prefix'" [name]="'gear'"></afp-icon>
    Settings
  </afp-breadcrumb-item>
</afp-breadcrumb>

<AfpBreadcrumb>
  <AfpBreadcrumbItem href="/">
    <AfpIcon slot="prefix" name="house"></AfpIcon>
    <AfpIcon slot="separator" name="arrow-right"></AfpIcon>
    Home
  </AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/dashboard">
    <AfpIcon slot="prefix" name="kanban"></AfpIcon>
    <AfpIcon slot="suffix" name="activity"></AfpIcon>
    <AfpIcon slot="separator" name="arrow-right"></AfpIcon>
    Dashboard
  </AfpBreadcrumbItem>
  <AfpBreadcrumbItem>
    <AfpIcon slot="separator" name="arrow-right"></AfpIcon>
    <AfpIcon slot="prefix" name="gear"></AfpIcon>
    Settings
  </AfpBreadcrumbItem>
</AfpBreadcrumb>

<AfpBreadcrumb>
  <AfpBreadcrumbItem :href="'/'">
    <AfpIcon :slot="'prefix'" :name="'house'"></AfpIcon>
    <AfpIcon :slot="'separator'" :name="'arrow-right'"></AfpIcon>
    Home
  </AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/dashboard'">
    <AfpIcon :slot="'prefix'" :name="'kanban'"></AfpIcon>
    <AfpIcon :slot="'suffix'" :name="'activity'"></AfpIcon>
    <AfpIcon :slot="'separator'" :name="'arrow-right'"></AfpIcon>
    Dashboard
  </AfpBreadcrumbItem>
  <AfpBreadcrumbItem>
    <AfpIcon :slot="'separator'" :name="'arrow-right'"></AfpIcon>
    <AfpIcon :slot="'prefix'" :name="'gear'"></AfpIcon>
    Settings
  </AfpBreadcrumbItem>
</AfpBreadcrumb>

Custom CSS Property #

Using CSS --afp-breadcrumb-spacing property to change the breadcrumb's spacing.

Home

Products

Electronics

Smartphones

<afp-breadcrumb style="--afp-breadcrumb-spacing: 1rem;">
  <afp-breadcrumb-item href="/">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item href="/products/electronics">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item>Smartphones</afp-breadcrumb-item>
</afp-breadcrumb>

<afp-breadcrumb [style]="'--afp-breadcrumb-spacing: 1rem;'">
  <afp-breadcrumb-item [href]="'/'">Home</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products'">Products</afp-breadcrumb-item>
  <afp-breadcrumb-item [href]="'/products/electronics'">Electronics</afp-breadcrumb-item>
  <afp-breadcrumb-item>Smartphones</afp-breadcrumb-item>
</afp-breadcrumb>

<AfpBreadcrumb style="--afp-breadcrumb-spacing: 1rem;">
  <AfpBreadcrumbItem href="/">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem href="/products/electronics">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>Smartphones</AfpBreadcrumbItem>
</AfpBreadcrumb>

<AfpBreadcrumb :style="'--afp-breadcrumb-spacing: 1rem;'">
  <AfpBreadcrumbItem :href="'/'">Home</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products'">Products</AfpBreadcrumbItem>
  <AfpBreadcrumbItem :href="'/products/electronics'">Electronics</AfpBreadcrumbItem>
  <AfpBreadcrumbItem>Smartphones</AfpBreadcrumbItem>
</AfpBreadcrumb>

Properties

Learn more about properties.

Name Description Reflects

ariaLabel
arialabel

Aria label for the breadcrumb navigation. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

maxItems
maxitems

Maximum number of breadcrumb items to show before collapsing.

Type number | undefined

collapseBehavior
collapsebehavior

Controls the behavior when clicking on the ellipsis.

Type

AfpBreadcrumbCollapseBehavior

Name	Description
`NONE`	Ellipsis is static and does nothing when clicked.
`EXPAND`	Clicking ellipsis expands all breadcrumb items inline.
`DROPDOWN`	Clicking ellipsis shows a dropdown with collapsed items.

AfpBreadcrumbCollapseBehavior

Default AfpCollapseBehavior.NONE

Methods

Learn more about using methods.

Name	Description	Arguments
`collapse`	Resets the breadcrumb to its collapsed state. Useful for programmatically collapsing after expand behavior.	-
`expand`	Expands all breadcrumb items (removes collapse). Only works when collapseBehavior is set to 'expand'.	-

Slots

Learn more about slots.

Name	Description
`default`	The default slot for breadcrumb items.

Internationalization

Learn more about internationalization.

Key	Description
`breadcrumb.aria-label`	aria label for the breadcrumb navigation.
`breadcrumb.ellipsis-label`	aria label for the ellipsis button.
`breadcrumb.dropdown-label`	aria label for the dropdown container.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`nav`	The navigation container.	`::part(nav)`
`list`	The breadcrumb list container.	`::part(list)`
`ellipsis`	The ellipsis button element.	`::part(ellipsis)`
`dropdown`	The dropdown container for collapsed items.	`::part(dropdown)`

CSS Custom Properties

Name	Description	Default
`--afp-breadcrumb-spacing`	Spacing between breadcrumb items.	`--afp-spacing-2x-small`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-breadcrumb-item

afp-icon

afp-dropdown

afp-button

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/breadcrumb/breadcrumb.js';

Breadcrumb

Examples #

Max Items #

Expand #

Dropdown #

Prefix and Suffix #

Custom CSS Property #

Properties

Methods

Slots

Internationalization

CSS Parts

CSS Custom Properties

Dependencies

Importing