feat: Created Breadcrumb main component

libs/flowbite-angular/src/lib/components/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbComponent } from '.';
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [BreadcrumbComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/flowbite-angular/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,38 @@
+import {
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import { BreadcrumbItemComponent } from './breadcrumb-item.component';
+
+@Component({
+  selector: 'flowbite-breadcrumb',
+  template: `
+    <nav
+      [class]="
+        'flex ' +
+        (solidBackground
+          ? 'px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
+          : '')
+      "
+      aria-label="Breadcrumb"
+    >
+      <ol class="inline-flex items-center space-x-1 md:space-x-3">
+        <ng-content></ng-content>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbComponent implements AfterViewInit {
+  @ContentChildren(BreadcrumbItemComponent)
+  items?: QueryList<BreadcrumbItemComponent>;
+  @Input() solidBackground = false;
+
+  ngAfterViewInit() {
+    if (this.items?.first) {
+      this.items.first.setAsRoot();
+    }
+  }
+}