### File

`src/breadcrumb/breadcrumb.component.ts`

### Description

See demo

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

### Implements

`AfterContentInit`

### Example

### 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"
    			[current]="item.current"
    			[ariaCurrent]="item.ariaCurrent">
    			<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"
    			[current]="first?.current"
    			[ariaCurrent]="first?.ariaCurrent">
    			<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}}"
    						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"
    			[current]="secondLast?.current"
    			[ariaCurrent]="secondLast?.ariaCurrent">
    			<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"
    			[current]="last?.current"
    			[ariaCurrent]="last?.ariaCurrent">
    			<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

- ngAfterContentInit
- Protected updateChildren

###### Inputs

- ariaLabel
- items
- noTrailingSlash
- skeleton
- threshold

###### Accessors

- skeleton
- threshold
- shouldShowContent
- shouldShowOverflow
- first
- overflowItems
- secondLast
- last

### Inputs

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

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

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

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

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

### Methods

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

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

### Properties

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

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

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

### Accessors

skeleton
get `skeleton()`
Defined in src/breadcrumb/breadcrumb.component.ts:122
set `skeleton(value: any)`
Defined in src/breadcrumb/breadcrumb.component.ts:117

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

threshold
get `threshold()`
Defined in src/breadcrumb/breadcrumb.component.ts:134
set `threshold(threshold: number)`
Defined in src/breadcrumb/breadcrumb.component.ts:127

Parameters :

Name | Type | Optional
threshold | `number` | No

Returns : `void`

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

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

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

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

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

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

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

    import { BreadcrumbItem } from "./breadcrumb-item.interface";
    import { BreadcrumbItemComponent } from "./breadcrumb-item.component";

    const MINIMUM_OVERFLOW_THRESHOLD = 4;

    /**
     *  [See demo](../../?path=/story/breadcrumb--basic)
     *
     * <example-url>../../iframe.html?id=breadcrumb--basic</example-url>
     *
     * @export
     * @class Breadcrumb
     * @implements {AfterContentInit}
     */
    @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"
    				[current]="item.current"
    				[ariaCurrent]="item.ariaCurrent">
    				<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"
    				[current]="first?.current"
    				[ariaCurrent]="first?.ariaCurrent">
    				<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}}"
    							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"
    				[current]="secondLast?.current"
    				[ariaCurrent]="secondLast?.ariaCurrent">
    				<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"
    				[current]="last?.current"
    				[ariaCurrent]="last?.ariaCurrent">
    				<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;

    	protected _threshold: number;
    	protected _skeleton = false;

    	@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;
    	}

    	ngAfterContentInit() {
    		this.updateChildren();
    	}

    	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 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 ""