### File

`src/breadcrumb/breadcrumb.component.ts`

### Description

See demo

../../iframe.html?id=breadcrumb--basic

### Implements

`AfterContentInit`

### Metadata

selector | `ibm-breadcrumb`
template |
    <nav #nav class="bx--breadcrumb"
    	[ngClass]="{
    		'bx--skeleton' : skeleton,
    		'bx--breadcrumb--no-trailing-slash' : noTrailingSlash
    	}"
    	[attr.aria-label]="ariaLabel">
    	<ng-template [ngIf]="shouldShowContent">
    		<ng-content></ng-content>
    	</ng-template>
    	<ng-template [ngIf]="!shouldShowOverflow">
    		<ibm-breadcrumb-item
    			*ngFor="let item of items"
    			[href]="item.href"
    			[route]="item.route"
    			[routeExtras]="item.routeExtras"
    			[current]="item.current"
    			[ariaCurrent]="item.ariaCurrent"
    			(navigation)="navigation.emit($event)">
    			<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
    			<ng-template
    				*ngIf="item.template"
    				[ngTemplateOutlet]="item.template"
    				[ngTemplateOutletContext]="{ $implicit: item }">
    			</ng-template>
    		</ibm-breadcrumb-item>
    	</ng-template>
    	<ng-template [ngIf]="shouldShowOverflow">
    		<ibm-breadcrumb-item
    			[href]="first?.href"
    			[route]="first?.route"
    			[routeExtras]="first?.routeExtras"
    			[current]="first?.current"
    			[ariaCurrent]="first?.ariaCurrent"
    			(navigation)="navigation.emit($event)">
    			<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
    			<ng-template
    				*ngIf="first?.template"
    				[ngTemplateOutlet]="first?.template"
    				[ngTemplateOutletContext]="{ $implicit: first }">
    			</ng-template>
    		</ibm-breadcrumb-item>
    		<ibm-breadcrumb-item>
    			<ibm-overflow-menu>
    				<li class="bx--overflow-menu-options__option"
    					*ngFor="let item of overflowItems">
    					<a class="bx--overflow-menu-options__btn"
    						href="{{item?.href}}"
    						(click)="navigate($event, item)"
    						style="text-decoration: none;">
    						<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
    						<ng-template
    							*ngIf="item?.template"
    							[ngTemplateOutlet]="item?.template"
    							[ngTemplateOutletContext]="{ $implicit: item }">
    						</ng-template>
    					</a>
    				</li>
    			</ibm-overflow-menu>
    		</ibm-breadcrumb-item>
    		<ibm-breadcrumb-item
    			[href]="secondLast?.href"
    			[route]="secondLast?.route"
    			[routeExtras]="secondLast?.routeExtras"
    			[current]="secondLast?.current"
    			[ariaCurrent]="secondLast?.ariaCurrent"
    			(navigation)="navigation.emit($event)">
    			<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
    			<ng-template
    				*ngIf="secondLast?.template"
    				[ngTemplateOutlet]="secondLast?.template"
    				[ngTemplateOutletContext]="{ $implicit: secondLast }">
    			</ng-template>
    		</ibm-breadcrumb-item>
    		<ibm-breadcrumb-item
    			[href]="last?.href"
    			[route]="last?.route"
    			[routeExtras]="last?.routeExtras"
    			[current]="last?.current"
    			[ariaCurrent]="last?.ariaCurrent"
    			(navigation)="navigation.emit($event)">
    			<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
    			<ng-template
    				*ngIf="last?.template"
    				[ngTemplateOutlet]="last?.template"
    				[ngTemplateOutletContext]="{ $implicit: last }">
    			</ng-template>
    		</ibm-breadcrumb-item>
    	</ng-template>
    </nav>

### Index

###### Properties
Protected _skeleton Protected _threshold children
###### Methods
navigate ngAfterContentInit Protected updateChildren
###### Inputs
ariaLabel items noTrailingSlash skeleton threshold
###### Outputs
navigation
###### Accessors
skeleton threshold shouldShowContent shouldShowOverflow first overflowItems secondLast last

### Constructor

`constructor(domSanitizer: DomSanitizer, router: Router)`
Defined in src/breadcrumb/breadcrumb.component.ts:182
Parameters :
Name | Type | Optional
domSanitizer | `DomSanitizer` | No
router | `Router` | No

### Inputs

`ariaLabel` | Type : `string`
Defined in src/breadcrumb/breadcrumb.component.ts:125

`items` | Type : `Array<BreadcrumbItem>`
Defined in src/breadcrumb/breadcrumb.component.ts:121

`noTrailingSlash` | Default value : `false`
Defined in src/breadcrumb/breadcrumb.component.ts:123

`skeleton` | Type : `any`
Defined in src/breadcrumb/breadcrumb.component.ts:128

`threshold` | Type : `number`
Defined in src/breadcrumb/breadcrumb.component.ts:138

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/breadcrumb/breadcrumb.component.ts:152

### Methods

navigate
`navigate(event, item: BreadcrumbItem)`
Defined in src/breadcrumb/breadcrumb.component.ts:190
Parameters :
Name | Type | Optional
event |  | No
item | `BreadcrumbItem` | No
Returns : `void`

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/breadcrumb/breadcrumb.component.ts:186
Returns : `void`

Protected updateChildren
`updateChildren()`
Defined in src/breadcrumb/breadcrumb.component.ts:198
Returns : `void`

### Properties

Protected _skeleton
`_skeleton: ```
Default value : `false`
Defined in src/breadcrumb/breadcrumb.component.ts:182

Protected _threshold
`_threshold: `number``
Type : `number`
Defined in src/breadcrumb/breadcrumb.component.ts:181

children
`children: `QueryList<BreadcrumbItemComponent>``
Type : `QueryList<BreadcrumbItemComponent>`
Decorators : `@ContentChildren(BreadcrumbItemComponent)`
Defined in src/breadcrumb/breadcrumb.component.ts:119

### Accessors

skeleton
get `skeleton()`
Defined in src/breadcrumb/breadcrumb.component.ts:133
set `skeleton(value: any)`
Defined in src/breadcrumb/breadcrumb.component.ts:128
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

threshold
get `threshold()`
Defined in src/breadcrumb/breadcrumb.component.ts:145
set `threshold(threshold: number)`
Defined in src/breadcrumb/breadcrumb.component.ts:138
Parameters :
Name | Type | Optional
threshold | `number` | No
Returns : `void`

shouldShowContent
get `shouldShowContent()`
Defined in src/breadcrumb/breadcrumb.component.ts:154

shouldShowOverflow
get `shouldShowOverflow()`
Defined in src/breadcrumb/breadcrumb.component.ts:158

first
get `first()`
Defined in src/breadcrumb/breadcrumb.component.ts:165

overflowItems
get `overflowItems()`
Defined in src/breadcrumb/breadcrumb.component.ts:169

secondLast
get `secondLast()`
Defined in src/breadcrumb/breadcrumb.component.ts:173

last
get `last()`
Defined in src/breadcrumb/breadcrumb.component.ts:177

    import {
    	Component,
    	Input,
    	ContentChildren,
    	QueryList,
    	AfterContentInit,
    	TemplateRef,
    	Optional,
    	Output,
    	EventEmitter
    } from "@angular/core";

    import { BreadcrumbItem } from "./breadcrumb-item.interface";
    import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
    import { DomSanitizer } from "@angular/platform-browser";
    import { Router } from "@angular/router";

    const MINIMUM_OVERFLOW_THRESHOLD = 4;

    /**
     *  [See demo](../../?path=/story/breadcrumb--basic)
     *
     * <example-url>../../iframe.html?id=breadcrumb--basic</example-url>
     */
    @Component({
    	selector: "ibm-breadcrumb",
    	template: `
    	<nav #nav class="bx--breadcrumb"
    		[ngClass]="{
    			'bx--skeleton' : skeleton,
    			'bx--breadcrumb--no-trailing-slash' : noTrailingSlash
    		}"
    		[attr.aria-label]="ariaLabel">
    		<ng-template [ngIf]="shouldShowContent">
    			<ng-content></ng-content>
    		</ng-template>
    		<ng-template [ngIf]="!shouldShowOverflow">
    			<ibm-breadcrumb-item
    				*ngFor="let item of items"
    				[href]="item.href"
    				[route]="item.route"
    				[routeExtras]="item.routeExtras"
    				[current]="item.current"
    				[ariaCurrent]="item.ariaCurrent"
    				(navigation)="navigation.emit($event)">
    				<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
    				<ng-template
    					*ngIf="item.template"
    					[ngTemplateOutlet]="item.template"
    					[ngTemplateOutletContext]="{ $implicit: item }">
    				</ng-template>
    			</ibm-breadcrumb-item>
    		</ng-template>
    		<ng-template [ngIf]="shouldShowOverflow">
    			<ibm-breadcrumb-item
    				[href]="first?.href"
    				[route]="first?.route"
    				[routeExtras]="first?.routeExtras"
    				[current]="first?.current"
    				[ariaCurrent]="first?.ariaCurrent"
    				(navigation)="navigation.emit($event)">
    				<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
    				<ng-template
    					*ngIf="first?.template"
    					[ngTemplateOutlet]="first?.template"
    					[ngTemplateOutletContext]="{ $implicit: first }">
    				</ng-template>
    			</ibm-breadcrumb-item>
    			<ibm-breadcrumb-item>
    				<ibm-overflow-menu>
    					<li class="bx--overflow-menu-options__option"
    						*ngFor="let item of overflowItems">
    						<a class="bx--overflow-menu-options__btn"
    							href="{{item?.href}}"
    							(click)="navigate($event, item)"
    							style="text-decoration: none;">
    							<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
    							<ng-template
    								*ngIf="item?.template"
    								[ngTemplateOutlet]="item?.template"
    								[ngTemplateOutletContext]="{ $implicit: item }">
    							</ng-template>
    						</a>
    					</li>
    				</ibm-overflow-menu>
    			</ibm-breadcrumb-item>
    			<ibm-breadcrumb-item
    				[href]="secondLast?.href"
    				[route]="secondLast?.route"
    				[routeExtras]="secondLast?.routeExtras"
    				[current]="secondLast?.current"
    				[ariaCurrent]="secondLast?.ariaCurrent"
    				(navigation)="navigation.emit($event)">
    				<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
    				<ng-template
    					*ngIf="secondLast?.template"
    					[ngTemplateOutlet]="secondLast?.template"
    					[ngTemplateOutletContext]="{ $implicit: secondLast }">
    				</ng-template>
    			</ibm-breadcrumb-item>
    			<ibm-breadcrumb-item
    				[href]="last?.href"
    				[route]="last?.route"
    				[routeExtras]="last?.routeExtras"
    				[current]="last?.current"
    				[ariaCurrent]="last?.ariaCurrent"
    				(navigation)="navigation.emit($event)">
    				<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
    				<ng-template
    					*ngIf="last?.template"
    					[ngTemplateOutlet]="last?.template"
    					[ngTemplateOutletContext]="{ $implicit: last }">
    				</ng-template>
    			</ibm-breadcrumb-item>
    		</ng-template>
    	</nav>`
    })
    export class Breadcrumb implements AfterContentInit {
    	@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;

    	@Input() items: Array<BreadcrumbItem>;

    	@Input() noTrailingSlash = false;

    	@Input() ariaLabel: string;

    	@Input()
    	set skeleton(value: any) {
    		this._skeleton = value;
    		this.updateChildren();
    	}

    	get skeleton(): any {
    		return this._skeleton;
    	}

    	@Input()
    	set threshold(threshold: number) {
    		this._threshold = threshold;
    		if (isNaN(threshold) || threshold < MINIMUM_OVERFLOW_THRESHOLD) {
    			this._threshold = MINIMUM_OVERFLOW_THRESHOLD;
    		}
    	}

    	get threshold(): number {
    		return this._threshold;
    	}

    	/**
    	 * Emits the navigation status promise when the link is activated
    	 */
    	@Output() navigation = new EventEmitter<Promise<boolean>>();

    	get shouldShowContent(): boolean {
    		return !this.items;
    	}

    	get shouldShowOverflow(): boolean {
    		if (!this.items) {
    			return false;
    		}
    		return this.items.length > this.threshold;
    	}

    	get first(): BreadcrumbItem {
    		return this.shouldShowOverflow ? this.items[0] : null;
    	}

    	get overflowItems(): Array<BreadcrumbItem> {
    		return this.shouldShowOverflow ? this.items.slice(1, this.items.length - 2) : [];
    	}

    	get secondLast(): BreadcrumbItem {
    		return this.shouldShowOverflow ? this.items[this.items.length - 2] : null;
    	}

    	get last(): BreadcrumbItem {
    		return this.shouldShowOverflow ? this.items[this.items.length - 1] : null;
    	}

    	protected _threshold: number;
    	protected _skeleton = false;

    	constructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) { }

    	ngAfterContentInit() {
    		this.updateChildren();
    	}

    	navigate(event, item: BreadcrumbItem) {
    		if (this.router && item.route) {
    			event.preventDefault();
    			const status = this.router.navigate(item.route, item.routeExtras);
    			this.navigation.emit(status);
    		}
    	}

    	protected updateChildren() {
    		if (this.children) {
    			this.children.toArray().forEach(child => child.skeleton = this.skeleton);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""