diff --git a/components/breadcrumb/demo/dropdown.md b/components/breadcrumb/demo/dropdown.md
new file mode 100644
index 0000000000..90962d41d8
--- /dev/null
+++ b/components/breadcrumb/demo/dropdown.md
@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+ zh-CN: 带下拉菜单的面包屑
+ en-US: Bread crumbs with drop down menu
+---
+
+## zh-CN
+
+面包屑支持下拉菜单。
+
+## en-US
+
+Breadcrumbs support drop down menu.
+
diff --git a/components/breadcrumb/demo/dropdown.ts b/components/breadcrumb/demo/dropdown.ts
new file mode 100644
index 0000000000..ea8a5dd5f8
--- /dev/null
+++ b/components/breadcrumb/demo/dropdown.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-breadcrumb-dropdown',
+ template: `
+
+
+ Ant Design
+
+
+ Component
+
+
+ An Application
+
+
+ Button
+
+
+
+
+
+ `,
+ styles: []
+})
+export class NzDemoBreadcrumbDropdownComponent {}
diff --git a/components/breadcrumb/nz-breadcrumb-item.component.html b/components/breadcrumb/nz-breadcrumb-item.component.html
index f86c9a73ab..488280a3bb 100644
--- a/components/breadcrumb/nz-breadcrumb-item.component.html
+++ b/components/breadcrumb/nz-breadcrumb-item.component.html
@@ -1,6 +1,16 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ nzBreadCrumbComponent.nzSeparator }}
diff --git a/components/breadcrumb/nz-breadcrumb-item.component.ts b/components/breadcrumb/nz-breadcrumb-item.component.ts
index f0b00f5160..86ca716b9c 100755
--- a/components/breadcrumb/nz-breadcrumb-item.component.ts
+++ b/components/breadcrumb/nz-breadcrumb-item.component.ts
@@ -6,7 +6,9 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
@@ -16,7 +18,7 @@ import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
selector: 'nz-breadcrumb-item',
exportAs: 'nzBreadcrumbItem',
preserveWhitespaces: false,
- templateUrl: 'nz-breadcrumb-item.component.html',
+ templateUrl: './nz-breadcrumb-item.component.html',
styles: [
`
nz-breadcrumb-item:last-child {
@@ -30,5 +32,10 @@ import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
]
})
export class NzBreadCrumbItemComponent {
+ /**
+ * Dropdown content of a breadcrumb item.
+ */
+ @Input() nzOverlay?: NzDropdownMenuComponent;
+
constructor(public nzBreadCrumbComponent: NzBreadCrumbComponent) {}
}
diff --git a/components/breadcrumb/nz-breadcrumb.module.ts b/components/breadcrumb/nz-breadcrumb.module.ts
index cee32f9793..84ce5eec63 100644
--- a/components/breadcrumb/nz-breadcrumb.module.ts
+++ b/components/breadcrumb/nz-breadcrumb.module.ts
@@ -6,16 +6,19 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
+import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NzAddOnModule } from 'ng-zorro-antd/core';
+import { NzAddOnModule, NzOverlayModule } from 'ng-zorro-antd/core';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzBreadCrumbItemComponent } from './nz-breadcrumb-item.component';
import { NzBreadCrumbComponent } from './nz-breadcrumb.component';
@NgModule({
- imports: [CommonModule, NzAddOnModule],
+ imports: [CommonModule, NzAddOnModule, OverlayModule, NzOverlayModule, NzDropDownModule, NzIconModule],
declarations: [NzBreadCrumbComponent, NzBreadCrumbItemComponent],
exports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent]
})
diff --git a/components/breadcrumb/nz-breadcrumb.spec.ts b/components/breadcrumb/nz-breadcrumb.spec.ts
index dc32f8c854..4dcf4ac274 100644
--- a/components/breadcrumb/nz-breadcrumb.spec.ts
+++ b/components/breadcrumb/nz-breadcrumb.spec.ts
@@ -5,7 +5,8 @@ import { By } from '@angular/platform-browser';
import { Router, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
-// import { dispatchMouseEvent } from 'ng-zorro-antd/core';
+import { NzDemoBreadcrumbDropdownComponent } from 'ng-zorro-antd/breadcrumb/demo/dropdown';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
import { NzDemoBreadcrumbBasicComponent } from './demo/basic';
@@ -46,6 +47,31 @@ describe('breadcrumb', () => {
});
});
+ describe('dropdown', () => {
+ let fixture: ComponentFixture;
+ let items: DebugElement[];
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [NzBreadCrumbModule, NzDropDownModule],
+ declarations: [NzDemoBreadcrumbDropdownComponent],
+ providers: []
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NzDemoBreadcrumbDropdownComponent);
+ items = fixture.debugElement.queryAll(By.directive(NzBreadCrumbItemComponent));
+ });
+
+ it('should dropdown work', () => {
+ fixture.detectChanges();
+
+ const dropdownElement = items[2];
+ expect((dropdownElement.nativeElement as HTMLElement).querySelector('.ant-dropdown-trigger')).not.toBe(null);
+ });
+ });
+
describe('separator', () => {
let fixture: ComponentFixture;
let items: DebugElement[];