+
+
+
+ Basic Breadcrumb
+ Simple breadcrumb navigation with icons and disabled current page.
+
+
+ Home
+ Products
+ Electronics
+ Laptops
+
+
+
+
+
+
+ Custom Separator
+ Breadcrumb with a custom separator character.
+
+
+ Dashboard
+ Settings
+ Account
+ Profile
+
+
+
+
+
+
+ Icon Separator Template
+ Breadcrumb with a custom icon as separator using ng-template.
+
+
+
+ chevron_right
+
+ Home
+ Catalog
+ Books
+ Fiction
+
+
+
+
+
+
+ Collapsed Items (Overflow)
+ Long breadcrumb trail with collapsed middle items. Shows first item and last 2 items.
+
+
+ Home
+ Products
+ Electronics
+ Laptops
+ Gaming
+ ASUS ROG Strix
+
+
+
+
+
+
+ Standard Links (href)
+ Breadcrumb using standard href links instead of router links.
+
+
+ Infragistics
+ Products
+ Ignite UI
+
+
+
+
+
+
+ Dynamic Breadcrumb (Data-driven)
+ Breadcrumb items generated from data array.
+
+
+ @for (item of breadcrumbItems; track item.label; let last = $last) {
+
+ {{ item.label }}
+
+ }
+
+
+
+
+
+
+ Custom Styled Breadcrumb
+ Breadcrumb with custom CSS styling applied.
+
+
+ Store
+ Category
+ Subcategory
+ Current Product
+
+
+
+
+
diff --git a/src/app/breadcrumb/breadcrumb.sample.scss b/src/app/breadcrumb/breadcrumb.sample.scss
new file mode 100644
index 00000000000..98c022b7ec5
--- /dev/null
+++ b/src/app/breadcrumb/breadcrumb.sample.scss
@@ -0,0 +1,53 @@
+.breadcrumb-sample {
+ padding: 16px 24px;
+ background: #f5f5f5;
+ border-radius: 8px;
+ margin-bottom: 8px;
+}
+
+.sample-description {
+ color: #666;
+ font-size: 14px;
+ margin-bottom: 12px;
+}
+
+.sample-column.full-width {
+ min-width: 100%;
+}
+
+// Custom styled breadcrumb
+.styled-breadcrumb {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+ igx-breadcrumb {
+ --igx-breadcrumb-item-color: rgba(255, 255, 255, 0.9);
+ --igx-breadcrumb-link-color: #fff;
+ --igx-breadcrumb-link-hover-color: #e0e0ff;
+ --igx-breadcrumb-separator-color: rgba(255, 255, 255, 0.6);
+ --igx-breadcrumb-current-color: #fff;
+ --igx-breadcrumb-disabled-color: rgba(255, 255, 255, 0.7);
+ }
+
+ .igx-breadcrumb-item__link {
+ color: #fff;
+ font-weight: 500;
+
+ &:hover {
+ color: #e0e0ff;
+ }
+ }
+
+ .igx-breadcrumb-item__text {
+ color: rgba(255, 255, 255, 0.9);
+ }
+
+ .igx-breadcrumb__separator-text {
+ color: rgba(255, 255, 255, 0.6);
+ }
+}
+
+#igniteui-demo-app .sample-title {
+ font-size: 16px;
+ margin-bottom: 8px;
+ color: #333;
+}
diff --git a/src/app/breadcrumb/breadcrumb.sample.ts b/src/app/breadcrumb/breadcrumb.sample.ts
new file mode 100644
index 00000000000..6a053dba328
--- /dev/null
+++ b/src/app/breadcrumb/breadcrumb.sample.ts
@@ -0,0 +1,39 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IGX_BREADCRUMB_DIRECTIVES, IgxBreadcrumbSeparatorDirective } from 'igniteui-angular/breadcrumb';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: 'app-breadcrumb-sample',
+ styleUrls: ['breadcrumb.sample.scss'],
+ templateUrl: 'breadcrumb.sample.html',
+ imports: [IGX_BREADCRUMB_DIRECTIVES, IgxBreadcrumbSeparatorDirective, IgxIconComponent]
+})
+export class BreadcrumbSampleComponent {
+ // Sample data for dynamic breadcrumbs
+ public breadcrumbItems = [
+ { label: 'Home', link: '/home', icon: 'home' },
+ { label: 'Products', link: '/products' },
+ { label: 'Electronics', link: '/products/electronics' },
+ { label: 'Laptops', link: '/products/electronics/laptops' },
+ { label: 'Gaming Laptops', link: '/products/electronics/laptops/gaming' },
+ { label: 'ASUS ROG', disabled: true }
+ ];
+
+ // Toggle for custom separator demo
+ public useCustomSeparator = false;
+
+ // Toggle for collapsed items demo
+ public showCollapsed = true;
+ public maxItems = 4;
+ public itemsBeforeCollapse = 1;
+ public itemsAfterCollapse = 2;
+
+ public toggleCustomSeparator(): void {
+ this.useCustomSeparator = !this.useCustomSeparator;
+ }
+
+ public toggleCollapsed(): void {
+ this.showCollapsed = !this.showCollapsed;
+ }
+}