# td-breadcrumbs

`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.

## API Summary

#### Inputs

- separatorIcon?: string
  - Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.

#### Methods

- count: number
  - The total count of individual breadcrumbs (read only)

#### Attributes

- hiddenBreadcrumbs: TdBreadcrumbComponent[]
  - Array of currently hidden breadcrumbs (responsive)

# td-breadcrumb

`td-breadcrumb` element generates an individual breadcrumb component.

## API Summary

#### Methods

- displayCrumb: boolean
  - Whether to display the individual breadcrumb or not
- width: number
  - The current width of the individual breadcrumb (read only)

## Setup

Import the [CovalentBreadcrumbsModule] in your NgModule:

```typescript
import { CovalentBreadcrumbsModule } from '@covalent/core/breadcrumbs';
@NgModule({
  imports: [
    CovalentBreadcrumbsModule,
    ...
  ],
  ...
})
export class MyModule {}
```

## Usage

Basic Example:

```html
<td-breadcrumbs>
  <a td-breadcrumb [routerLink]="'/'">Home</a>
  <a td-breadcrumb [routerLink]="'/layouts'">Layouts</a>
  <a td-breadcrumb [routerLink]="'/layouts2'">Layouts2</a>
  <a td-breadcrumb [routerLink]="'/layouts3'">Layouts3</a>
  <td-breadcrumb>Manage List</td-breadcrumb>
</td-breadcrumbs>
```

Example with all inputs/outputs:

```html
<td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
  <a td-breadcrumb [routerLink]="'/'">Home</a>
  <a td-breadcrumb [routerLink]="'/layouts'">Layouts</a>
  <a td-breadcrumb [routerLink]="'/layouts2'">Layouts2</a>
  <a td-breadcrumb [routerLink]="'/layouts3'">Layouts3</a>
  <td-breadcrumb>Manage List</td-breadcrumb>
</td-breadcrumbs>
<mat-divider></mat-divider>
<div>Total Breadcrumbs Count: {{breadcrumbs.count}}</div>
<div>
  Hidden Breadcrumbs Count (shrink window to see):
  {{breadcrumbs.hiddenBreadcrumbs.length}}
</div>
<ng-template
  let-breadcrumb
  let-index="index"
  ngFor
  [ngForOf]="breadcrumbs.hiddenBreadcrumbs"
>
  <div>
    <p>Breadcrumb Number: {{index}}</p>
    <p>Breadcrumb Width: {{breadcrumb?.width}}</p>
    <mat-divider></mat-divider>
  </div>
</ng-template>
```