diff --git a/src/platform/experimental/breadcrumbs/README.md b/src/platform/experimental/breadcrumbs/README.md
new file mode 100644
index 0000000000..87d6e6e481
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/README.md
@@ -0,0 +1,89 @@
+# td-breadcrumbs (experimental)
+
+`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
+
+## API Summary
+
+#### Inputs
+
++ separatorIcon?: string
+ + Sets the icon url shown between breadcrumbs. Defaults to right chevron.
+
+#### Methods
+
++ count: number
+ + The total count of individual breadcrumbs (read only)
+
+#### Attributes
+
++ hiddenBreadcrumbs: TdBreadcrumbComponent[]
+ + Array of currently hidden breadcrumbs (responsive)
+
+# td-breadcrumb
+
+`td-breadcrumb` element generates an individual breadcrumb component.
+
+## API Summary
+
+#### Methods
+
++ displayCrumb: boolean
+ + Whether to display the individual breadcrumb or not
++ width: number
+ + The current width of the individual breadcrumb (read only)
+
+## Setup
+
+Import the [CovalentBreadcrumbsModule] in your NgModule:
+
+```typescript
+import { CovalentBreadcrumbsModule } from '@covalent/experimental/breadcrumbs';
+@NgModule({
+ imports: [
+ CovalentBreadcrumbsModule,
+ ...
+ ],
+ ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Basic Example:
+
+```html
+
+ Home
+ Layouts
+ Layouts2
+ Layouts3
+ Manage List
+
+```
+
+Example with all inputs/outputs:
+
+```html
+
+ Home
+ Layouts
+ Layouts2
+ Layouts3
+ Manage List
+
+
+
+ Total Breadcrumbs Count: {{breadcrumbs.count}}
+
+
+ Hidden Breadcrumbs Count (shrink window to see): {{breadcrumbs.hiddenBreadcrumbs.length}}
+
+
+
+
Breadcrumb Number: {{index}}
+
Breadcrumb Width: {{breadcrumb?.width}}
+
+
+
+
diff --git a/src/platform/experimental/breadcrumbs/breadcrumbs.component.scss b/src/platform/experimental/breadcrumbs/breadcrumbs.component.scss
new file mode 100644
index 0000000000..a5d60692ac
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/breadcrumbs.component.scss
@@ -0,0 +1,5 @@
+:host {
+ .td-breadcrumbs {
+ white-space: nowrap;
+ }
+}
diff --git a/src/platform/experimental/breadcrumbs/breadcrumbs.component.spec.ts b/src/platform/experimental/breadcrumbs/breadcrumbs.component.spec.ts
new file mode 100644
index 0000000000..1ba51d63f3
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/breadcrumbs.component.spec.ts
@@ -0,0 +1,106 @@
+import {
+ TestBed,
+ inject,
+ async,
+ ComponentFixture,
+} from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import {
+ Component,
+ DebugElement,
+} from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+import {
+ CovalentBreadcrumbsModule,
+} from './public-api';
+import {
+ TdBreadcrumbsComponent,
+} from './breadcrumbs.component';
+
+@Component({
+ selector: 'fake',
+ template: `fake
`,
+})
+export class FakeComponent {
+}
+
+describe('Component: Breadcrumbs', () => {
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ TdBreadcrumbsTestComponent,
+ FakeComponent,
+ ],
+ imports: [
+ NoopAnimationsModule,
+ RouterTestingModule.withRoutes([
+ { path: '', component: FakeComponent },
+ { path: 'layouts', component: FakeComponent },
+ { path: 'layouts2', component: FakeComponent },
+ { path: 'layouts3', component: FakeComponent },
+ ]),
+ CovalentBreadcrumbsModule,
+ ],
+ });
+ TestBed.compileComponents();
+ }));
+
+ it('should render 5 Breadcrumbs',
+ async(inject([], () => {
+ let fixture: ComponentFixture = TestBed.createComponent(TdBreadcrumbsTestComponent);
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ let breadcrumbs: TdBreadcrumbsComponent = fixture.debugElement.query(By.directive(TdBreadcrumbsComponent)).componentInstance;
+ expect(breadcrumbs.count).toBe(5);
+ });
+ }),
+ ));
+
+ it('should change the separatorIcon',
+ async(inject([], () => {
+ let fixture: ComponentFixture = TestBed.createComponent(TdBreadcrumbsTestComponent);
+ let component: TdBreadcrumbsTestComponent = fixture.debugElement.componentInstance;
+ component.separatorIcon = 'flight_land';
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.css('.td-breadcrumb'))[1].nativeElement.innerHTML.indexOf('flight_land')).toBeGreaterThan(-1);
+ });
+ }),
+ ));
+
+ it('should resize window and hide breadcrumbs',
+ async(inject([], () => {
+ let fixture: ComponentFixture = TestBed.createComponent(TdBreadcrumbsTestComponent);
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ fixture.debugElement.query(By.directive(TdBreadcrumbsComponent)).nativeElement.parentElement.style.width = '300px';
+ window.dispatchEvent(new Event('resize'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ let breadcrumbs: TdBreadcrumbsComponent = fixture.debugElement.query(By.directive(TdBreadcrumbsComponent)).componentInstance;
+ expect(breadcrumbs.hiddenBreadcrumbs.length).toBe(2);
+ });
+ });
+ }),
+ ));
+});
+
+@Component({
+ selector: 'td-breadcrumbs-test',
+ template: `
+
+ `,
+})
+class TdBreadcrumbsTestComponent {
+ separatorIcon: string = 'motorcycle';
+}
diff --git a/src/platform/experimental/breadcrumbs/breadcrumbs.component.ts b/src/platform/experimental/breadcrumbs/breadcrumbs.component.ts
new file mode 100644
index 0000000000..123a58a040
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/breadcrumbs.component.ts
@@ -0,0 +1,152 @@
+import {
+ Component,
+ ContentChildren,
+ QueryList,
+ OnInit,
+ OnDestroy,
+ ChangeDetectionStrategy,
+ AfterContentInit,
+ DoCheck,
+ ChangeDetectorRef,
+ ElementRef,
+ Input,
+} from '@angular/core';
+
+import {
+ Subscription,
+ Subject,
+} from 'rxjs';
+import {
+ debounceTime,
+ distinctUntilChanged,
+} from 'rxjs/operators';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { merge } from 'rxjs/observable/merge';
+
+import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+
+@Component({
+ selector: 'td-breadcrumbs',
+ styleUrls: ['./breadcrumbs.component.scss'],
+ templateUrl: './breadcrumbs.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterContentInit, OnDestroy {
+
+ private _resizeSubscription: Subscription = Subscription.EMPTY;
+ private _widthSubject: Subject = new Subject();
+ private _resizing: boolean = false;
+
+ // all the sub components, which are the individual breadcrumbs
+ @ContentChildren(TdBreadcrumbComponent) _breadcrumbs: QueryList;
+ // the list of hidden breadcrumbs not shown right now (responsive)
+ hiddenBreadcrumbs: TdBreadcrumbComponent[] = new Array();
+
+ /**
+ * Sets the icon url shown between breadcrumbs. Defaults to right chevron.
+ */
+ @Input('separatorIcon') separatorIcon: string = 'navigate_next';
+
+ constructor(private _elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef) { }
+
+ ngOnInit(): void {
+ this._resizeSubscription = merge(
+ fromEvent(window, 'resize').pipe(
+ debounceTime(10),
+ ),
+ this._widthSubject.asObservable().pipe(
+ distinctUntilChanged(),
+ ),
+ ).subscribe(() => {
+ if (!this._resizing) {
+ this._resizing = true;
+ setTimeout(() => {
+ this.displayWidthAvailableCrumbs();
+ this._resizing = false;
+ this._changeDetectorRef.markForCheck();
+ }, 100);
+ }
+ });
+ }
+
+ ngDoCheck(): void {
+ if (this._elementRef && this._elementRef.nativeElement) {
+ this._widthSubject.next(this.nativeElementWidth);
+ }
+ }
+
+ ngAfterContentInit(): void {
+ this.setCrumbIcons();
+ this._changeDetectorRef.markForCheck();
+ }
+
+ ngOnDestroy(): void {
+ this._resizeSubscription.unsubscribe();
+ }
+
+ /*
+ * Current width of the element container
+ */
+ get nativeElementWidth(): number {
+ return (this._elementRef.nativeElement).getBoundingClientRect().width;
+ }
+
+ /**
+ * The total count of individual breadcrumbs
+ */
+ get count(): number {
+ return this._breadcrumbs ? this._breadcrumbs.length : 0;
+ }
+
+ /**
+ * Set the crumb icon separators
+ */
+ private setCrumbIcons(): void {
+ let breadcrumbArray: TdBreadcrumbComponent[] = this._breadcrumbs.toArray();
+ if (breadcrumbArray.length > 0) {
+ // don't show the icon on the last breadcrumb
+ breadcrumbArray[breadcrumbArray.length - 1]._displayIcon = false;
+ }
+ breadcrumbArray.forEach((breadcrumb: TdBreadcrumbComponent) => {
+ breadcrumb.separatorIcon = this.separatorIcon;
+ });
+ }
+
+ private displayWidthAvailableCrumbs(): void {
+ let curTotCrumbWidth: number = 0;
+ let crumbsArray: TdBreadcrumbComponent[] = this._breadcrumbs.toArray();
+ // calculate the current width of the shown breadcrumbs
+ for (let i: number = this.hiddenBreadcrumbs.length; i < crumbsArray.length; i++) {
+ curTotCrumbWidth += crumbsArray[i].width;
+ }
+ // hide the first bread crumb if window size is smaller than all the crumb sizes
+ if (this.nativeElementWidth < curTotCrumbWidth) {
+ crumbsArray[this.hiddenBreadcrumbs.length].displayCrumb = false;
+ this.hiddenBreadcrumbs.push(crumbsArray[this.hiddenBreadcrumbs.length]);
+ this.displayWidthAvailableCrumbs();
+ } else {
+ // loop over all the hidden crumbs and see if adding them back in will
+ // fit in the current window size
+ let totalHidden: number = this.hiddenBreadcrumbs.length - 1;
+ for (let i: number = totalHidden; i >= 0; i--) {
+ let hiddenCrumbWidth: number = crumbsArray[i].width;
+ if ((curTotCrumbWidth + hiddenCrumbWidth) < this.nativeElementWidth) {
+ crumbsArray[i].displayCrumb = true;
+ crumbsArray[i + 1]._displayIcon = true;
+ this.hiddenBreadcrumbs.pop();
+ // recalculate the total width based on adding back in a crumb
+ let newTotCrumbWidth: number = 0;
+ for (let j: number = this.hiddenBreadcrumbs.length; j < crumbsArray.length; j++) {
+ newTotCrumbWidth += crumbsArray[j].width;
+ }
+ curTotCrumbWidth = newTotCrumbWidth;
+ } else if (i === totalHidden) {
+ // need to break out of loop here because the first in the hidden
+ // list can't fit in current window size
+ break;
+ }
+ }
+ }
+ }
+
+}
diff --git a/src/platform/experimental/breadcrumbs/breadcrumbs.module.ts b/src/platform/experimental/breadcrumbs/breadcrumbs.module.ts
new file mode 100644
index 0000000000..39d73f8b06
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/breadcrumbs.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+import { TdBreadcrumbsComponent } from './breadcrumbs.component';
+import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ MatIconModule,
+ ],
+ declarations: [
+ TdBreadcrumbsComponent,
+ TdBreadcrumbComponent,
+ ],
+ exports: [
+ TdBreadcrumbsComponent,
+ TdBreadcrumbComponent,
+ ],
+})
+export class CovalentBreadcrumbsModule {
+
+}
diff --git a/src/platform/experimental/breadcrumbs/index.ts b/src/platform/experimental/breadcrumbs/index.ts
new file mode 100644
index 0000000000..7e1a213e3e
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/src/platform/experimental/breadcrumbs/package.json b/src/platform/experimental/breadcrumbs/package.json
new file mode 100644
index 0000000000..dedb72ce9c
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/package.json
@@ -0,0 +1,7 @@
+{
+ "ngPackage": {
+ "lib": {
+ "entryFile": "index.ts"
+ }
+ }
+}
diff --git a/src/platform/experimental/breadcrumbs/public-api.ts b/src/platform/experimental/breadcrumbs/public-api.ts
new file mode 100644
index 0000000000..fe571da45b
--- /dev/null
+++ b/src/platform/experimental/breadcrumbs/public-api.ts
@@ -0,0 +1,2 @@
+export * from './breadcrumbs.module';
+export * from './breadcrumbs.component';
diff --git a/src/platform/experimental/public-api.ts b/src/platform/experimental/public-api.ts
index 1012583450..b53d64cff2 100644
--- a/src/platform/experimental/public-api.ts
+++ b/src/platform/experimental/public-api.ts
@@ -1,2 +1,3 @@
export * from './template-rename-me-experiment-module/index';
+export * from './breadcrumbs/index';
export * from './tab-select/index';
diff --git a/src/platform/experimental/theming/_all-theme.scss b/src/platform/experimental/theming/_all-theme.scss
new file mode 100644
index 0000000000..0546bc1409
--- /dev/null
+++ b/src/platform/experimental/theming/_all-theme.scss
@@ -0,0 +1,6 @@
+@import '../breadcrumbs/breadcrumb/breadcrumb-theme';
+
+// Create a theme.
+@mixin experimental-theme($theme, $config: null) {
+ @include td-breadcrumb-theme($theme);
+}
diff --git a/src/test-bed/main/main.component.html b/src/test-bed/main/main.component.html
new file mode 100644
index 0000000000..3da35dd5f8
--- /dev/null
+++ b/src/test-bed/main/main.component.html
@@ -0,0 +1,10 @@
+Test Bed
+
+Sandbox Links:
+
+
+
\ No newline at end of file
diff --git a/src/test-bed/main/main.component.scss b/src/test-bed/main/main.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/test-bed/main/main.component.ts b/src/test-bed/main/main.component.ts
new file mode 100644
index 0000000000..071074d134
--- /dev/null
+++ b/src/test-bed/main/main.component.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (C) 2016-2018 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'testbed-main',
+ templateUrl: './main.component.html',
+ styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {
+
+}
diff --git a/src/test-bed/sandbox/breadcrumbs/breadcrumbs.component.html b/src/test-bed/sandbox/breadcrumbs/breadcrumbs.component.html
new file mode 100644
index 0000000000..0fa8001947
--- /dev/null
+++ b/src/test-bed/sandbox/breadcrumbs/breadcrumbs.component.html
@@ -0,0 +1,33 @@
+
+
Breadcrumbs
+
Basic Breadcrumbs
+
+ Home
+ Layouts
+ Layouts2
+ Layouts3
+ Manage List
+
+
+
Breadcrumbs with all inputs/outputs
+
+ Home
+ Layouts
+ Layouts2
+ Layouts3
+ Manage List
+
+
+ Total Breadcrumbs Count: {{breadcrumbs.count}}
+
+
+ Hidden Breadcrumbs Count (shrink window to see): {{breadcrumbs.hiddenBreadcrumbs.length}}
+
+
+
+
Breadcrumb Index: {{index}}
+
Breadcrumb Width: {{breadcrumb?.width}}
+
+
+
+
Tab Select
+
Default with accent color with a disabled tab
+
+
+ MY LABEL
+
+
+ MY LABEL 2
+
+
+ MY LABEL 3
+
+
+
value: {{tabSelect.value}}
+
+
Value usage with primary backgroundColor
+
+
+ MY LABEL
+
+
+ MY LABEL 2
+
+
+ MY LABEL 3
+
+
+
value: {{value}}
+
+
Forms Usage
+
+
+ MY LABEL
+
+
+ MY LABEL 2
+
+
+ MY LABEL 3
+
+
+
value: {{formValue}}
+
+
Disabled tabs
+
+
+ MY LABEL
+
+
+ MY LABEL 2
+
+
+ MY LABEL 3
+
+
+
+
Stretched and disabled ripple on tabs
+
+
+ MY LABEL
+
+
+ MY LABEL 2
+
+
+ MY LABEL 3
+
+
+
-
Tab Select
-
Default with accent color with a disabled tab
-
-
- MY LABEL
-
-
- MY LABEL 2
-
-
- MY LABEL 3
-
-
-
value: {{tabSelect.value}}
-
-
Value usage with primary backgroundColor
-
-
- MY LABEL
-
-
- MY LABEL 2
-
-
- MY LABEL 3
-
-
-
value: {{value}}
-
-
Forms Usage
-
-
- MY LABEL
-
-
- MY LABEL 2
-
-
- MY LABEL 3
-
-
-
value: {{formValue}}
-
-
Disabled tabs
-
-
- MY LABEL
-
-
- MY LABEL 2
-
-
- MY LABEL 3
-
-
-
-
Stretched and disabled ripple on tabs
-
-
- MY LABEL
-
-
- MY LABEL 2
-
-
- MY LABEL 3
-
-
-