diff --git a/libs/components/src/breadcrumbs/breadcrumb.component.html b/libs/components/src/breadcrumbs/breadcrumb.component.html
new file mode 100644
index 0000000000..5291f0cab4
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumb.component.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/libs/components/src/breadcrumbs/breadcrumb.component.ts b/libs/components/src/breadcrumbs/breadcrumb.component.ts
new file mode 100644
index 0000000000..060154b4f6
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumb.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
+
+@Component({
+ selector: "bit-breadcrumb",
+ templateUrl: "./breadcrumb.component.html",
+})
+export class BreadcrumbComponent {
+ @Input()
+ icon?: string;
+
+ @Input()
+ route?: string | any[] = undefined;
+
+ @Input()
+ queryParams?: Record = {};
+
+ @Output()
+ click = new EventEmitter();
+
+ @ViewChild(TemplateRef, { static: true }) content: TemplateRef;
+
+ onClick(args: unknown) {
+ this.click.next(args);
+ }
+}
diff --git a/libs/components/src/breadcrumbs/breadcrumbs.component.html b/libs/components/src/breadcrumbs/breadcrumbs.component.html
new file mode 100644
index 0000000000..e291c4a9b9
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumbs.component.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0" class="bwi bwi-angle-right tw-mx-1.5 tw-text-main">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/libs/components/src/breadcrumbs/breadcrumbs.component.ts b/libs/components/src/breadcrumbs/breadcrumbs.component.ts
new file mode 100644
index 0000000000..64ca8146c8
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumbs.component.ts
@@ -0,0 +1,39 @@
+import { Component, ContentChildren, Input, QueryList } from "@angular/core";
+
+import { BreadcrumbComponent } from "./breadcrumb.component";
+
+@Component({
+ selector: "bit-breadcrumbs",
+ templateUrl: "./breadcrumbs.component.html",
+})
+export class BreadcrumbsComponent {
+ @Input()
+ show = 3;
+
+ private breadcrumbs: BreadcrumbComponent[] = [];
+
+ @ContentChildren(BreadcrumbComponent)
+ protected set breadcrumbList(value: QueryList) {
+ this.breadcrumbs = value.toArray();
+ }
+
+ protected get beforeOverflow() {
+ if (this.hasOverflow) {
+ return this.breadcrumbs.slice(0, this.show - 1);
+ }
+
+ return this.breadcrumbs;
+ }
+
+ protected get overflow() {
+ return this.breadcrumbs.slice(this.show - 1, -1);
+ }
+
+ protected get afterOverflow() {
+ return this.breadcrumbs.slice(-1);
+ }
+
+ protected get hasOverflow() {
+ return this.breadcrumbs.length > this.show;
+ }
+}
diff --git a/libs/components/src/breadcrumbs/breadcrumbs.module.ts b/libs/components/src/breadcrumbs/breadcrumbs.module.ts
new file mode 100644
index 0000000000..0812b552f9
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumbs.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { IconButtonModule } from "../icon-button";
+import { LinkModule } from "../link";
+import { MenuModule } from "../menu";
+
+import { BreadcrumbComponent } from "./breadcrumb.component";
+import { BreadcrumbsComponent } from "./breadcrumbs.component";
+
+@NgModule({
+ imports: [CommonModule, LinkModule, IconButtonModule, MenuModule, RouterModule],
+ declarations: [BreadcrumbsComponent, BreadcrumbComponent],
+ exports: [BreadcrumbsComponent, BreadcrumbComponent],
+})
+export class BreadcrumbsModule {}
diff --git a/libs/components/src/breadcrumbs/breadcrumbs.stories.ts b/libs/components/src/breadcrumbs/breadcrumbs.stories.ts
new file mode 100644
index 0000000000..782bb39e75
--- /dev/null
+++ b/libs/components/src/breadcrumbs/breadcrumbs.stories.ts
@@ -0,0 +1,91 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Meta, Story, moduleMetadata } from "@storybook/angular";
+
+import { IconButtonModule } from "../icon-button";
+import { LinkModule } from "../link";
+import { MenuModule } from "../menu";
+
+import { BreadcrumbComponent } from "./breadcrumb.component";
+import { BreadcrumbsComponent } from "./breadcrumbs.component";
+
+interface Breadcrumb {
+ icon?: string;
+ name: string;
+ route: string;
+}
+
+@Component({
+ template: "",
+})
+class EmptyComponent {}
+
+export default {
+ title: "Component Library/Breadcrumbs",
+ component: BreadcrumbsComponent,
+ decorators: [
+ moduleMetadata({
+ declarations: [BreadcrumbComponent],
+ imports: [
+ LinkModule,
+ MenuModule,
+ IconButtonModule,
+ RouterModule.forRoot([{ path: "**", component: EmptyComponent }], { useHash: true }),
+ ],
+ }),
+ ],
+ args: {
+ items: [],
+ },
+ argTypes: {
+ breadcrumbs: {
+ table: { disable: true },
+ },
+ click: { action: "clicked" },
+ },
+} as Meta;
+
+const Template: Story = (args: BreadcrumbsComponent) => ({
+ props: args,
+ template: `
+ Router links
+
+
+ {{item.name}}
+
+
+
+ Click emit
+
+
+ {{item.name}}
+
+
+ `,
+});
+
+export const TopLevel = Template.bind({});
+TopLevel.args = {
+ items: [{ icon: "bwi-star", name: "Top Level" }] as Breadcrumb[],
+};
+
+export const SecondLevel = Template.bind({});
+SecondLevel.args = {
+ items: [
+ { name: "Acme Vault", route: "/" },
+ { icon: "bwi-collection", name: "Collection", route: "collection" },
+ ] as Breadcrumb[],
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+ items: [
+ { name: "Acme Vault", route: "" },
+ { icon: "bwi-collection", name: "Collection", route: "collection" },
+ { icon: "bwi-collection", name: "Middle-Collection 1", route: "middle-collection-1" },
+ { icon: "bwi-collection", name: "Middle-Collection 2", route: "middle-collection-2" },
+ { icon: "bwi-collection", name: "Middle-Collection 3", route: "middle-collection-3" },
+ { icon: "bwi-collection", name: "Middle-Collection 4", route: "middle-collection-4" },
+ { icon: "bwi-collection", name: "End Collection", route: "end-collection" },
+ ] as Breadcrumb[],
+};
diff --git a/libs/components/src/breadcrumbs/index.ts b/libs/components/src/breadcrumbs/index.ts
new file mode 100644
index 0000000000..02f4311e6d
--- /dev/null
+++ b/libs/components/src/breadcrumbs/index.ts
@@ -0,0 +1,3 @@
+export * from "./breadcrumbs.module";
+export * from "./breadcrumbs.component";
+export * from "./breadcrumb.component";
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 86af709cda..0ede402874 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -3,6 +3,7 @@ export * from "./avatar";
export * from "./badge";
export * from "./banner";
export * from "./button";
+export * from "./breadcrumbs";
export * from "./callout";
export * from "./checkbox";
export * from "./color-password";