0
# Navigation Components
1

2
Components for application navigation and wayfinding including menus, breadcrumbs, pagination, and navigation elements.
3

4
## Capabilities
5

6
### Menu Component
7

8
Comprehensive menu system with horizontal, vertical, and inline modes.
9

10
```typescript { .api }
11
/**
12
 * Menu directive
13
 * Selector: [nz-menu]
14
 */
15
interface NzMenuDirective {
16
  /** Menu mode */
17
  nzMode: 'vertical' | 'horizontal' | 'inline';
18
  /** Menu theme */
19
  nzTheme: 'light' | 'dark';
20
  /** Inline collapsed state */
21
  nzInlineCollapsed: boolean;
22
  /** Indent size for inline mode */
23
  nzInlineIndent: number;
24
  /** Selectable menu items */
25
  nzSelectable: boolean;
26
  /** Menu click event */
27
  nzClick: EventEmitter<NzMenuItemDirective>;
28
}
29

30
/**
31
 * Menu item component
32
 * Selector: [nz-menu-item]
33
 */
34
interface NzMenuItemComponent {
35
  /** Disabled state */
36
  nzDisabled: boolean;
37
  /** Selected state */
38
  nzSelected: boolean;
39
  /** Danger style */
40
  nzDanger: boolean;
41
  /** Padding left */
42
  nzPaddingLeft: number | null;
43
  /** Menu item title */
44
  nzTitle: string | null;
45
  /** Match router */
46
  nzMatchRouter: boolean;
47
  /** Match router exact */
48
  nzMatchRouterExact: boolean;
49
}
50

51
/**
52
 * Submenu component
53
 * Selector: [nz-submenu]
54
 */
55
interface NzSubMenuComponent {
56
  /** Submenu title */
57
  nzTitle: string | TemplateRef<void>;
58
  /** Submenu icon */
59
  nzIcon: string;
60
  /** Open state */
61
  nzOpen: boolean;
62
  /** Disabled state */
63
  nzDisabled: boolean;
64
  /** Menu class for popup mode */
65
  nzMenuClassName: string;
66
  /** Popup class name */
67
  nzPopupClassName: string;
68
  /** Open change event */
69
  nzOpenChange: EventEmitter<boolean>;
70
}
71

72
/**
73
 * Menu group component
74
 * Selector: [nz-menu-group]
75
 */
76
interface NzMenuGroupComponent {
77
  /** Group title */
78
  nzTitle: string | TemplateRef<void>;
79
}
80

81
/**
82
 * Menu divider directive
83
 * Selector: [nz-menu-divider]
84
 */
85
interface NzMenuDividerDirective {}
86

87
// Module
88
class NzMenuModule {
89
  static forRoot(): ModuleWithProviders<NzMenuModule>;
90
}
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import { NzMenuModule } from 'ng-zorro-antd/menu';
97

98
@Component({
99
  template: `
100
    <!-- Horizontal menu -->
101
    <ul nz-menu nzMode="horizontal" nzTheme="dark">
102
      <li nz-menu-item nzSelected>
103
        <i nz-icon nzType="mail"></i>
104
        Navigation One
105
      </li>
106
      <li nz-menu-item nzDisabled>
107
        <i nz-icon nzType="appstore"></i>
108
        Navigation Two
109
      </li>
110
      <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
111
        <ul>
112
          <li nz-menu-group nzTitle="Item 1">
113
            <ul>
114
              <li nz-menu-item>Option 1</li>
115
              <li nz-menu-item>Option 2</li>
116
            </ul>
117
          </li>
118
        </ul>
119
      </li>
120
    </ul>
121

122
    <!-- Vertical inline menu -->
123
    <ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">
124
      <li nz-submenu nzOpen nzTitle="Navigation One" nzIcon="user">
125
        <ul>
126
          <li nz-menu-item>Option 1</li>
127
          <li nz-menu-item>Option 2</li>
128
        </ul>
129
      </li>
130
      <li nz-menu-item>
131
        <i nz-icon nzType="video-camera"></i>
132
        <span>Navigation Two</span>
133
      </li>
134
    </ul>
135
  `
136
})
137
export class MenuExampleComponent {
138
  isCollapsed = false;
139
}
140
```
141

142
### Breadcrumb Component
143

144
Breadcrumb navigation showing the current page location within a hierarchy.
145

146
```typescript { .api }
147
/**
148
 * Breadcrumb component
149
 * Selector: nz-breadcrumb
150
 */
151
interface NzBreadCrumbComponent {
152
  /** Auto generate breadcrumb */
153
  nzAutoGenerate: boolean;
154
  /** Separator between breadcrumbs */
155
  nzSeparator: string | TemplateRef<void> | null;
156
  /** Route config for auto generation */
157
  nzRouteLabel: string;
158
  /** Route config key */
159
  nzRouteLabelFn: (label: string) => string;
160
}
161

162
/**
163
 * Breadcrumb item component
164
 * Selector: nz-breadcrumb-item
165
 */
166
interface NzBreadCrumbItemComponent {
167
  /** Overlay for dropdown */
168
  nzOverlay: TemplateRef<void>;
169
}
170

171
/**
172
 * Breadcrumb separator component
173
 * Selector: nz-breadcrumb-separator
174
 */
175
interface NzBreadCrumbSeparatorComponent {}
176

177
// Module
178
class NzBreadCrumbModule {
179
  static forRoot(): ModuleWithProviders<NzBreadCrumbModule>;
180
}
181
```
182

183
**Usage Examples:**
184

185
```typescript
186
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
187

188
@Component({
189
  template: `
190
    <!-- Basic breadcrumb -->
191
    <nz-breadcrumb>
192
      <nz-breadcrumb-item>
193
        <a [routerLink]="['/']">Home</a>
194
      </nz-breadcrumb-item>
195
      <nz-breadcrumb-item>
196
        <a [routerLink]="['/list']">Application List</a>
197
      </nz-breadcrumb-item>
198
      <nz-breadcrumb-item>
199
        Application
200
      </nz-breadcrumb-item>
201
    </nz-breadcrumb>
202

203
    <!-- With custom separator -->
204
    <nz-breadcrumb nzSeparator=">">
205
      <nz-breadcrumb-item>Home</nz-breadcrumb-item>
206
      <nz-breadcrumb-item>Application Center</nz-breadcrumb-item>
207
      <nz-breadcrumb-item>Application List</nz-breadcrumb-item>
208
      <nz-breadcrumb-item>An Application</nz-breadcrumb-item>
209
    </nz-breadcrumb>
210
  `
211
})
212
export class BreadcrumbExampleComponent {}
213
```
214

215
### Pagination Component
216

217
Pagination component for breaking up large datasets across multiple pages.
218

219
```typescript { .api }
220
/**
221
 * Pagination component
222
 * Selector: nz-pagination
223
 */
224
interface NzPaginationComponent {
225
  /** Total number of data items */
226
  nzTotal: number;
227
  /** Current page number */
228
  nzPageIndex: number;
229
  /** Number of data items per page */
230
  nzPageSize: number;
231
  /** Page size options */
232
  nzPageSizeOptions: number[];
233
  /** Show size changer */
234
  nzShowSizeChanger: boolean;
235
  /** Show quick jumper */
236
  nzShowQuickJumper: boolean;
237
  /** Show total info */
238
  nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }> | null;
239
  /** Simple mode */
240
  nzSimple: boolean;
241
  /** Disabled state */
242
  nzDisabled: boolean;
243
  /** Responsive mode */
244
  nzResponsive: boolean;
245
  /** Hide on single page */
246
  nzHideOnSinglePage: boolean;
247
  /** Page size changer options */
248
  nzPageSizeOptions: number[];
249
  /** Size */
250
  nzSize: 'default' | 'small';
251
  /** Item render function */
252
  nzItemRender: TemplateRef<PaginationItemRenderContext> | null;
253
  /** Page index change event */
254
  nzPageIndexChange: EventEmitter<number>;
255
  /** Page size change event */
256
  nzPageSizeChange: EventEmitter<number>;
257
}
258

259
// Types
260
interface PaginationItemRenderContext {
261
  $implicit: 'page' | 'prev' | 'next' | 'prev_5' | 'next_5';
262
  page: number;
263
}
264

265
// Module
266
class NzPaginationModule {
267
  static forRoot(): ModuleWithProviders<NzPaginationModule>;
268
}
269
```
270

271
### Steps Component
272

273
Steps component for guiding users through a process with multiple steps.
274

275
```typescript { .api }
276
/**
277
 * Steps component
278
 * Selector: nz-steps
279
 */
280
interface NzStepsComponent {
281
  /** Current step index */
282
  nzCurrent: number;
283
  /** Step direction */
284
  nzDirection: 'horizontal' | 'vertical';
285
  /** Label placement */
286
  nzLabelPlacement: 'horizontal' | 'vertical';
287
  /** Step type */
288
  nzType: 'default' | 'navigation';
289
  /** Step size */
290
  nzSize: 'default' | 'small';
291
  /** Starting index */
292
  nzStartIndex: number;
293
  /** Status of current step */
294
  nzStatus: 'wait' | 'process' | 'finish' | 'error';
295
  /** Progress dot mode */
296
  nzProgressDot: boolean | TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
297
}
298

299
/**
300
 * Step component
301
 * Selector: nz-step
302
 */
303
interface NzStepComponent {
304
  /** Step title */
305
  nzTitle: string | TemplateRef<void>;
306
  /** Step subtitle */
307
  nzSubtitle: string | TemplateRef<void>;
308
  /** Step description */
309
  nzDescription: string | TemplateRef<void>;
310
  /** Step status */
311
  nzStatus: 'wait' | 'process' | 'finish' | 'error';
312
  /** Step icon */
313
  nzIcon: string | TemplateRef<void>;
314
  /** Disabled state */
315
  nzDisabled: boolean;
316
  /** Percentage of progress */
317
  nzPercentage: number | null;
318
}
319

320
// Module
321
class NzStepsModule {
322
  static forRoot(): ModuleWithProviders<NzStepsModule>;
323
}
324
```
325

326
### Tabs Component
327

328
Tab component for organizing content into multiple panels.
329

330
```typescript { .api }
331
/**
332
 * Tab set component
333
 * Selector: nz-tabset
334
 */
335
interface NzTabSetComponent {
336
  /** Active tab index */
337
  nzSelectedIndex: number;
338
  /** Tab position */
339
  nzTabPosition: 'top' | 'bottom' | 'left' | 'right';
340
  /** Tab type */
341
  nzType: 'line' | 'card' | 'editable-card';
342
  /** Tab size */
343
  nzSize: 'large' | 'default' | 'small';
344
  /** Animated tabs */
345
  nzAnimated: boolean | { inkBar: boolean; tabPane: boolean };
346
  /** Tab bar extra content */
347
  nzTabBarExtraContent: TemplateRef<void>;
348
  /** Show add button */
349
  nzShowPagination: boolean;
350
  /** Hide all tabs */
351
  nzHideAll: boolean;
352
  /** Link router */
353
  nzLinkRouter: boolean;
354
  /** Link exact */
355
  nzLinkExact: boolean;
356
  /** Center tabs */
357
  nzCentered: boolean;
358
  /** Tab bar gutter */
359
  nzTabBarGutter: number;
360
  /** Tab bar style */
361
  nzTabBarStyle: NgStyleInterface;
362
  /** Selected index change event */
363
  nzSelectedIndexChange: EventEmitter<number>;
364
  /** Select change event */
365
  nzSelectChange: EventEmitter<{ nzSelectedIndex: number; tab: NzTabComponent }>;
366
  /** Close event */
367
  nzClose: EventEmitter<{ index: number }>;
368
  /** Add event */
369
  nzAdd: EventEmitter<void>;
370
}
371

372
/**
373
 * Tab component
374
 * Selector: nz-tab
375
 */
376
interface NzTabComponent {
377
  /** Tab title */
378
  nzTitle: string | TemplateRef<void>;
379
  /** Tab disabled */
380
  nzDisabled: boolean;
381
  /** Tab closable */
382
  nzClosable: boolean;
383
  /** Tab force render */
384
  nzForceRender: boolean;
385
  /** Route link */
386
  nzRouterIdentifier: string;
387
  /** Click event */
388
  nzClick: EventEmitter<void>;
389
  /** Context menu event */
390
  nzContextmenu: EventEmitter<MouseEvent>;
391
  /** Select event */
392
  nzSelect: EventEmitter<void>;
393
  /** Deselect event */
394
  nzDeselect: EventEmitter<void>;
395
}
396

397
// Module
398
class NzTabsModule {
399
  static forRoot(): ModuleWithProviders<NzTabsModule>;
400
}
401
```
402

403
### Dropdown Component
404

405
Dropdown component for displaying a list of actions in a floating menu.
406

407
```typescript { .api }
408
/**
409
 * Dropdown directive
410
 * Selector: [nz-dropdown]
411
 */
412
interface NzDropdownDirective {
413
  /** Dropdown menu */
414
  nzDropdownMenu: NzDropdownMenuComponent | null;
415
  /** Dropdown trigger */
416
  nzTrigger: 'click' | 'hover';
417
  /** Dropdown placement */
418
  nzPlacement: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
419
  /** Dropdown disabled */
420
  nzDisabled: boolean;
421
  /** Dropdown visible */
422
  nzVisible: boolean;
423
  /** Click hide */
424
  nzClickHide: boolean;
425
  /** Backdrop */
426
  nzBackdrop: boolean;
427
  /** Overlay class name */
428
  nzOverlayClassName: string;
429
  /** Overlay style */
430
  nzOverlayStyle: NgStyleInterface;
431
  /** Visible change event */
432
  nzVisibleChange: EventEmitter<boolean>;
433
}
434

435
/**
436
 * Dropdown menu component
437
 * Selector: nz-dropdown-menu
438
 */
439
interface NzDropdownMenuComponent {
440
  /** Dropdown direction */
441
  nzSelectable: boolean;
442
}
443

444
/**
445
 * Dropdown button directive
446
 * Selector: nz-dropdown-button, [nz-dropdown-button]
447
 */
448
interface NzDropdownButtonDirective {
449
  /** Button disabled */
450
  nzDisabled: boolean;
451
  /** Button size */
452
  nzSize: 'large' | 'default' | 'small';
453
  /** Button type */
454
  nzType: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
455
  /** Button ghost */
456
  nzGhost: boolean;
457
  /** Button danger */
458
  nzDanger: boolean;
459
  /** Button loading */
460
  nzLoading: boolean;
461
  /** Button icon */
462
  nzIcon: string | null;
463
}
464

465
// Module
466
class NzDropDownModule {
467
  static forRoot(): ModuleWithProviders<NzDropDownModule>;
468
}
469
```
470

471
### Anchor Component
472

473
Anchor component for in-page navigation with scroll tracking.
474

475
```typescript { .api }
476
/**
477
 * Anchor component
478
 * Selector: nz-anchor
479
 */
480
interface NzAnchorComponent {
481
  /** Anchor container */
482
  nzContainer: string | HTMLElement;
483
  /** Scroll offset to trigger change */
484
  nzOffsetTop: number;
485
  /** Scroll offset from bottom */
486
  nzOffsetBottom: number;
487
  /** Show ink ball */
488
  nzShowInkInFixed: boolean;
489
  /** Bounds for active anchor */
490
  nzBounds: number;
491
  /** Target offset for scrolling */
492
  nzTargetOffset: number;
493
  /** Anchor click event */
494
  nzClick: EventEmitter<string>;
495
  /** Scroll event */
496
  nzScroll: EventEmitter<NzAnchorLinkComponent>;
497
}
498

499
/**
500
 * Anchor link component
501
 * Selector: nz-anchor-link
502
 */
503
interface NzAnchorLinkComponent {
504
  /** Link href */
505
  nzHref: string;
506
  /** Link title */
507
  nzTitle: string | TemplateRef<void>;
508
  /** Target element */
509
  nzTarget: string;
510
}
511

512
// Module
513
class NzAnchorModule {
514
  static forRoot(): ModuleWithProviders<NzAnchorModule>;
515
}
516
```
517

518
### Affix Component
519

520
Affix component for sticking elements to the viewport.
521

522
```typescript { .api }
523
/**
524
 * Affix component
525
 * Selector: nz-affix
526
 */
527
interface NzAffixComponent {
528
  /** Offset from top */
529
  nzOffsetTop: number | null;
530
  /** Offset from bottom */
531
  nzOffsetBottom: number | null;
532
  /** Target container */
533
  nzTarget: string | Element | Window;
534
  /** Change event */
535
  nzChange: EventEmitter<boolean>;
536
}
537

538
// Module
539
class NzAffixModule {
540
  static forRoot(): ModuleWithProviders<NzAffixModule>;
541
}
542
```
543

544
### Back Top Component
545

546
Back to top component for quick navigation to page top.
547

548
```typescript { .api }
549
/**
550
 * Back top component
551
 * Selector: nz-back-top
552
 */
553
interface NzBackTopComponent {
554
  /** Target container */
555
  nzTarget: string | Element | Window;
556
  /** Visibility height */
557
  nzVisibilityHeight: number;
558
  /** Click event */
559
  nzClick: EventEmitter<boolean>;
560
  /** Duration for scrolling animation */
561
  nzDuration: number;
562
}
563

564
// Module
565
class NzBackTopModule {
566
  static forRoot(): ModuleWithProviders<NzBackTopModule>;
567
}
568
```
569

570
### Page Header Component
571

572
Page header component for displaying page title and actions.
573

574
```typescript { .api }
575
/**
576
 * Page header component
577
 * Selector: nz-page-header
578
 */
579
interface NzPageHeaderComponent {
580
  /** Page title */
581
  nzTitle: string | TemplateRef<void>;
582
  /** Page subtitle */
583
  nzSubtitle: string | TemplateRef<void>;
584
  /** Show back button */
585
  nzBackIcon: string | TemplateRef<void> | null;
586
  /** Ghost mode */
587
  nzGhost: boolean;
588
  /** Back event */
589
  nzBack: EventEmitter<void>;
590
}
591

592
/**
593
 * Page header breadcrumb directive
594
 * Selector: [nz-page-header-breadcrumb]
595
 */
596
interface NzPageHeaderBreadcrumbDirective {}
597

598
/**
599
 * Page header avatar directive
600
 * Selector: [nz-page-header-avatar]
601
 */
602
interface NzPageHeaderAvatarDirective {}
603

604
/**
605
 * Page header title directive
606
 * Selector: [nz-page-header-title]
607
 */
608
interface NzPageHeaderTitleDirective {}
609

610
/**
611
 * Page header subtitle directive
612
 * Selector: [nz-page-header-subtitle]
613
 */
614
interface NzPageHeaderSubtitleDirective {}
615

616
/**
617
 * Page header content directive
618
 * Selector: [nz-page-header-content]
619
 */
620
interface NzPageHeaderContentDirective {}
621

622
/**
623
 * Page header extra directive
624
 * Selector: [nz-page-header-extra]
625
 */
626
interface NzPageHeaderExtraDirective {}
627

628
/**
629
 * Page header footer directive
630
 * Selector: [nz-page-header-footer]
631
 */
632
interface NzPageHeaderFooterDirective {}
633

634
/**
635
 * Page header tags directive
636
 * Selector: [nz-page-header-tags]
637
 */
638
interface NzPageHeaderTagDirective {}
639

640
// Module
641
class NzPageHeaderModule {
642
  static forRoot(): ModuleWithProviders<NzPageHeaderModule>;
643
}
644
```