### File

`src/breadcrumb/breadcrumb-item.component.ts`

### Metadata

selector | `ibm-breadcrumb-item`

template

    <a
    	class="bx--link"
    	href="{{skeleton ? '/#' : href}}"
    	[attr.aria-current]="(current ? ariaCurrent : null)"
    	*ngIf="skeleton || href; else content">
    	<ng-container *ngTemplateOutlet="content"></ng-container>
    </a>
    <ng-template #content>
    	<ng-content></ng-content>
    </ng-template>

### Index

###### Inputs

- ariaCurrent
- current
- href
- skeleton

###### HostBindings

- class.bx--breadcrumb-item

### Inputs

`ariaCurrent` | Default value : `"page"`
Defined in src/breadcrumb/breadcrumb-item.component.ts:26

`current` | Default value : `false`
Defined in src/breadcrumb/breadcrumb-item.component.ts:28

`href` | Type : `string`
Defined in src/breadcrumb/breadcrumb-item.component.ts:22

`skeleton` | Default value : `false`
Defined in src/breadcrumb/breadcrumb-item.component.ts:24

### HostBindings

class.bx--breadcrumb-item
`class.bx--breadcrumb-item: ```
Default value : `true`
Defined in src/breadcrumb/breadcrumb-item.component.ts:30

    import {
    	Component,
    	HostBinding,
    	Input
    } from "@angular/core";

    @Component({
    	selector: "ibm-breadcrumb-item",
    	template: `
    	<a
    		class="bx--link"
    		href="{{skeleton ? '/#' : href}}"
    		[attr.aria-current]="(current ? ariaCurrent : null)"
    		*ngIf="skeleton || href; else content">
    		<ng-container *ngTemplateOutlet="content"></ng-container>
    	</a>
    	<ng-template #content>
    		<ng-content></ng-content>
    	</ng-template>`
    })
    export class BreadcrumbItemComponent {
    	@Input() href: string;

    	@Input() skeleton = false;

    	@Input() ariaCurrent = "page";

    	@HostBinding("class.bx--breadcrumb-item--current") @Input() current = false;

    	@HostBinding("class.bx--breadcrumb-item") itemClass = true;
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""