# Breadcrumbs

To use Breadcrumbs, first import `SharedModule`in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Breadcrumb with List

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuM2h2ckR6miwdzb2CY%2F-LuMqk-3goWZkvMZy85f%2Fbreadcrumbs.png?alt=media\&token=db31aba2-7eb9-496c-8a78-52a7f12a4e43)
{% endtab %}

{% tab title="HTML" %}

```markup
<gx-breadcrumbs [data]="breadcrumb"></gx-breadcrumbs>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}
```

{% endtab %}
{% endtabs %}

### Breadcrumb with Nav

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuM2h2ckR6miwdzb2CY%2F-LuMqk-3goWZkvMZy85f%2Fbreadcrumbs.png?alt=media\&token=db31aba2-7eb9-496c-8a78-52a7f12a4e43)
{% endtab %}

{% tab title="HTML" %}

```markup
<gx-breadcrumbs displayAs="nav" [data]="breadcrumb"></gx-breadcrumbs>
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { Component} from '@angular/core';

@Component({
  selector: 'app-bs-breadcrumb',
  templateUrl: './bs-breadcrumb.component.html'
})
export class BsBreadcrumbComponent {
  breadcrumb = [
    {label: 'Home'}, 
    {label: 'Library'}, 
    {label: 'Data', active: true}
  ];

  constructor() { }

}
```

{% endtab %}
{% endtabs %}