0
# Navigation Components
1
2
Flexible navigation components supporting tabs, pills, custom layouts, and dynamic content. Perfect for organizing content into navigable sections with keyboard and mouse support.
3
4
## Core Imports
5
6
```typescript
7
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
8
```
9
10
## Capabilities
11
12
### NgbNav
13
14
Main navigation container component that manages navigation items and content.
15
16
```typescript { .api }
17
@Component({
18
selector: '[ngbNav]',
19
exportAs: 'ngbNav'
20
})
21
class NgbNav {
22
/** Currently active navigation item ID */
23
@Input() activeId: any;
24
25
/** Enable/disable animations for content switching */
26
@Input() animation: boolean;
27
28
/** If true, content is removed from DOM when not active */
29
@Input() destroyOnHide: boolean;
30
31
/** Navigation orientation */
32
@Input() orientation: 'horizontal' | 'vertical';
33
34
/** ARIA roles ('tablist' or false to disable) */
35
@Input() roles: 'tablist' | false;
36
37
/** Event emitted when active ID changes */
38
@Output() activeIdChange: EventEmitter<any>;
39
40
/** Event emitted before navigation change */
41
@Output() navChange: EventEmitter<NgbNavChangeEvent>;
42
43
/** Programmatically select a navigation item */
44
select(id: any): void;
45
}
46
```
47
48
### NgbNavItem
49
50
Individual navigation item directive.
51
52
```typescript { .api }
53
@Directive({
54
selector: '[ngbNavItem]',
55
exportAs: 'ngbNavItem'
56
})
57
class NgbNavItem {
58
/** Unique identifier for the navigation item */
59
@Input() id: any;
60
61
/** If true, prevents the item from being selected */
62
@Input() disabled: boolean;
63
64
/** If true, content is removed from DOM when not active */
65
@Input() destroyOnHide: boolean;
66
67
/** ARIA role for the navigation item */
68
@Input() role: string;
69
70
/** Check if this item is currently active */
71
readonly active: boolean;
72
}
73
```
74
75
### NgbNavContent
76
77
Content area for navigation items.
78
79
```typescript { .api }
80
@Directive({
81
selector: '[ngbNavContent]'
82
})
83
class NgbNavContent {}
84
```
85
86
### NgbNavLink
87
88
Navigation link directive.
89
90
```typescript { .api }
91
@Directive({
92
selector: 'a[ngbNavLink]',
93
exportAs: 'ngbNavLink'
94
})
95
class NgbNavLink extends NgbNavLinkBase {}
96
```
97
98
### NgbNavLinkButton
99
100
Navigation button directive.
101
102
```typescript { .api }
103
@Directive({
104
selector: 'button[ngbNavLink]',
105
exportAs: 'ngbNavLink'
106
})
107
class NgbNavLinkButton extends NgbNavLinkBase {}
108
```
109
110
### NgbNavLinkBase
111
112
Base class for navigation links.
113
114
```typescript { .api }
115
@Directive()
116
abstract class NgbNavLinkBase {
117
/** If true, this link is disabled */
118
@Input() disabled: boolean;
119
120
/** ARIA role for the link */
121
@Input() role: string;
122
123
/** ARIA controls attribute */
124
@Input() ariaControls: string;
125
126
/** Tab index for keyboard navigation */
127
@Input() tabindex: number;
128
}
129
```
130
131
### NgbNavOutlet
132
133
Outlet component that displays the content of the active navigation item.
134
135
```typescript { .api }
136
@Component({
137
selector: '[ngbNavOutlet]',
138
exportAs: 'ngbNavOutlet'
139
})
140
class NgbNavOutlet {}
141
```
142
143
### NgbNavPane
144
145
Content pane for navigation items.
146
147
```typescript { .api }
148
@Directive({
149
selector: '[ngbNavPane]'
150
})
151
class NgbNavPane {
152
/** Navigation item this pane belongs to */
153
item: NgbNavItem;
154
155
/** Navigation instance */
156
nav: NgbNav;
157
158
/** ARIA role for the pane */
159
role: string;
160
}
161
```
162
163
### NgbNavItemRole
164
165
Role directive for navigation items.
166
167
```typescript { .api }
168
@Directive({
169
selector: '[ngbNavItemRole]'
170
})
171
class NgbNavItemRole {
172
/** ARIA role */
173
@Input() role: string;
174
}
175
```
176
177
### NgbNavConfig
178
179
Configuration service for setting default navigation behavior.
180
181
```typescript { .api }
182
@Injectable({ providedIn: 'root' })
183
class NgbNavConfig {
184
/** Default animation setting */
185
animation: boolean;
186
187
/** Default destroyOnHide setting */
188
destroyOnHide: boolean;
189
190
/** Default orientation */
191
orientation: 'horizontal' | 'vertical';
192
193
/** Default roles setting */
194
roles: 'tablist' | false;
195
}
196
```
197
198
## Event Interfaces
199
200
```typescript { .api }
201
interface NgbNavChangeEvent {
202
/** Currently active item ID */
203
activeId: any;
204
205
/** Next item ID to be activated */
206
nextId: any;
207
208
/** Prevent the navigation change */
209
preventDefault: () => void;
210
}
211
212
interface NgbNavContentContext {
213
/** The navigation item */
214
$implicit: NgbNavItem;
215
}
216
```
217
218
## Usage Examples
219
220
### Basic Navigation Tabs
221
222
```typescript
223
@Component({
224
template: `
225
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
226
<li [ngbNavItem]="1">
227
<button ngbNavLink>First Tab</button>
228
<ng-template ngbNavContent>
229
<p>This is the content for the first tab.</p>
230
</ng-template>
231
</li>
232
233
<li [ngbNavItem]="2">
234
<button ngbNavLink>Second Tab</button>
235
<ng-template ngbNavContent>
236
<p>This is the content for the second tab.</p>
237
</ng-template>
238
</li>
239
240
<li [ngbNavItem]="3" [disabled]="true">
241
<button ngbNavLink>Disabled Tab</button>
242
<ng-template ngbNavContent>
243
<p>This content won't be shown.</p>
244
</ng-template>
245
</li>
246
</ul>
247
248
<div [ngbNavOutlet]="nav" class="mt-3"></div>
249
`
250
})
251
export class BasicNavComponent {
252
activeId = 1;
253
}
254
```
255
256
### Navigation Pills
257
258
```typescript
259
@Component({
260
template: `
261
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills">
262
<li [ngbNavItem]="'home'">
263
<a ngbNavLink>Home</a>
264
<ng-template ngbNavContent>
265
<h4>Home Content</h4>
266
<p>Welcome to the home section.</p>
267
</ng-template>
268
</li>
269
270
<li [ngbNavItem]="'profile'">
271
<a ngbNavLink>Profile</a>
272
<ng-template ngbNavContent>
273
<h4>Profile Content</h4>
274
<p>Your profile information goes here.</p>
275
</ng-template>
276
</li>
277
</ul>
278
279
<div [ngbNavOutlet]="nav" class="mt-3"></div>
280
`
281
})
282
export class PillNavComponent {
283
activeId = 'home';
284
}
285
```
286
287
### Vertical Navigation
288
289
```typescript
290
@Component({
291
template: `
292
<div class="row">
293
<div class="col-3">
294
<div ngbNav
295
#nav="ngbNav"
296
[(activeId)]="activeId"
297
orientation="vertical"
298
class="nav-pills flex-column">
299
<div [ngbNavItem]="1">
300
<button ngbNavLink>Section 1</button>
301
<ng-template ngbNavContent>
302
<h5>Section 1</h5>
303
<p>Content for section 1.</p>
304
</ng-template>
305
</div>
306
307
<div [ngbNavItem]="2">
308
<button ngbNavLink>Section 2</button>
309
<ng-template ngbNavContent>
310
<h5>Section 2</h5>
311
<p>Content for section 2.</p>
312
</ng-template>
313
</div>
314
</div>
315
</div>
316
317
<div class="col-9">
318
<div [ngbNavOutlet]="nav"></div>
319
</div>
320
</div>
321
`
322
})
323
export class VerticalNavComponent {
324
activeId = 1;
325
}
326
```
327
328
### Dynamic Navigation
329
330
```typescript
331
@Component({
332
template: `
333
<div class="mb-3">
334
<button class="btn btn-primary me-2" (click)="addTab()">
335
Add Tab
336
</button>
337
<button class="btn btn-danger" (click)="removeTab()">
338
Remove Last Tab
339
</button>
340
</div>
341
342
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
343
<li *ngFor="let tab of tabs" [ngbNavItem]="tab.id">
344
<button ngbNavLink>{{ tab.title }}</button>
345
<ng-template ngbNavContent>
346
<p>{{ tab.content }}</p>
347
</ng-template>
348
</li>
349
</ul>
350
351
<div [ngbNavOutlet]="nav" class="mt-3"></div>
352
`
353
})
354
export class DynamicNavComponent {
355
activeId = 1;
356
tabs = [
357
{ id: 1, title: 'Tab 1', content: 'Content for tab 1' },
358
{ id: 2, title: 'Tab 2', content: 'Content for tab 2' }
359
];
360
361
private nextId = 3;
362
363
addTab() {
364
this.tabs.push({
365
id: this.nextId,
366
title: `Tab ${this.nextId}`,
367
content: `Content for tab ${this.nextId}`
368
});
369
this.activeId = this.nextId;
370
this.nextId++;
371
}
372
373
removeTab() {
374
if (this.tabs.length > 1) {
375
const removedTab = this.tabs.pop();
376
if (this.activeId === removedTab.id) {
377
this.activeId = this.tabs[this.tabs.length - 1].id;
378
}
379
}
380
}
381
}
382
```
383
384
### Navigation with Custom Content
385
386
```typescript
387
@Component({
388
template: `
389
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
390
<li [ngbNavItem]="'form'">
391
<button ngbNavLink>
392
<i class="bi bi-person-fill me-1"></i>
393
User Form
394
</button>
395
<ng-template ngbNavContent>
396
<form>
397
<div class="mb-3">
398
<label for="username">Username:</label>
399
<input type="text" class="form-control" id="username">
400
</div>
401
<div class="mb-3">
402
<label for="email">Email:</label>
403
<input type="email" class="form-control" id="email">
404
</div>
405
<button type="submit" class="btn btn-primary">Submit</button>
406
</form>
407
</ng-template>
408
</li>
409
410
<li [ngbNavItem]="'list'">
411
<button ngbNavLink>
412
<i class="bi bi-list-ul me-1"></i>
413
Items List
414
</button>
415
<ng-template ngbNavContent>
416
<ul class="list-group list-group-flush">
417
<li class="list-group-item" *ngFor="let item of items">
418
{{ item }}
419
</li>
420
</ul>
421
</ng-template>
422
</li>
423
</ul>
424
425
<div [ngbNavOutlet]="nav" class="mt-3"></div>
426
`
427
})
428
export class CustomContentNavComponent {
429
activeId = 'form';
430
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
431
}
432
```