API Reference / Angular InstantSearch Widgets / ais-breadcrumb
Apr. 24, 2019

ais-breadcrumb

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature 
<ais-breadcrumb
  [attributes]="string[]"
  // Optional parameters
  rootPath="string"
  [autoHideContainer]="boolean"
></ais-breadcrumb>
See code examples

About this widget

The ais-breadcrumb component is a secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.

It reduces the number of actions a user needs to take to get to a higher-level page and improves the discoverability of the app or website’s sections and pages. It is commonly used for websites with lot of data, organized into categories with subcategories.

All attributes (lvl0, lvl1 in this case) must be declared as attributesForFaceting in your Algolia settings.

Examples

Copy
1

<ais-breadcrumb [attributes]="['categories.lvl0', 'categories.lvl1']"></ais-breadcrumb>

Properties

attributes
type: string[]
Required

The name of the attributes to generate the menu
Copy
1
2
3

<ais-breadcrumb
  [attributes]="['categories.lvl0', 'categories.lvl1']"
></ais-breadcrumb>
rootPath
type: string
Optional

The path to use if the first level is not the root level
Copy
1

<ais-breadcrumb rootPath="Audio > Home Audio"></ais-breadcrumb>
autoHideContainer
type: boolean
default: true
Optional

Whether to hide the breadcrumb if there’s no item to display
Copy
1

<ais-breadcrumb [autoHideContainer]="false"></ais-breadcrumb>

Customize the UI - connectBreadcrumb

If you want to create your own UI of the ais-breadcrumb widget, you can combine the connectBreadcrumb connector with the BaseWidget class.

See code examples

1. Extend the BaseWidget class

First of all, you will need to write some boilerplate code in order to initialize correctly the BaseWidget class. This happens in the constructor() of your class extending the BaseWidget class.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';

@Component({
  selector: 'app-breadcrumbs',
  template: '<p>It works!</p>'
})
export class Breadcrumbs extends BaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('Breadcrumbs');
  }
}

There are a couple of things happening in this boilerplate:

  • we create a Breadcrumbs class extending BaseWidget
  • we reference the <ais-instantsearch> parent component instance on the Breadcrumbs widget class
  • we set app-breadcrumbs as a selector, so we can use our component as <app-breadcrumbs></app-breadcrumbs>

2. Connect your custom widget

The BaseWidget class has a method called createWidget() which takes two arguments: the connector to use and an object of options (instance options) for this connector. We call this method at ngOnInit. This component now implements OnInit.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectBreadcrumb } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-breadcrumbs',
  template: '<p>It works!</p>'
})
export class Breadcrumbs extends BaseWidget {
  public state: {
    // render options
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('Breadcrumbs');
  }
  ngOnInit() {
    this.createWidget(connectBreadcrumb, {
      // instance options
      attributes: ['categories.lvl0', 'categories.lvl1'],
    });
    super.ngOnInit();
  }
}

3. Render from the state

Your component instance has access to a this.state property which holds the rendering options of the widget.

public state: {
  items: object[];
  refine: Function;
  createURL: Function;
  widgetParams: object;
}
Copy
1
2
3
4
5

<div>
  <a href="#" *ngFor="let item of state.items" (click)="state.refine(item.value)">
    {{ item.name }}
  </a> &gt;
</div>

If SEO is critical to your search page, your custom HTML markup needs to be parsable:

  • use plain <a> tags with href attributes for search engines bots to follow them,
  • use semantic markup with structured data when relevant, and test it.

Refer to our SEO checklist for building SEO-ready search experiences.

Rendering options

items
type: object[]
Required

The items to render, containing the keys:

  • label: the label of the category or subcategory
  • value: the value of breadcrumb item
refine
type: function
default: item.value => undefined
Required

Sets the path of the hierarchical filter and triggers a new search.
createURL
type: function
default: item.value => string
Required

Generates a URL for the next state of a clicked item. The special value null is used for the root item of the breadcrumb and returns an empty array.
widgetParams
type: object

All original widget options forwarded to the render function.

Instance options

attributes
type: string[]
Required

The attributes to use to generate the hierarchy of the breadcrumb.
rootPath
type: string
Optional

The path to use if the first level is not the root level.
separator
type: string
default: >
Optional

The level separator used in the records.
transformItems
type: function
Optional

Transforms the items passed to the templates.

Full example

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectBreadcrumb } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-breadcrumbs',
  template: `
<div>
  <a href="#" *ngFor="let item of state.items" (click)="state.refine(item.value)">
    {{ item.name }}
  </a> &gt;
</div>
`
})
export class Breadcrumbs extends BaseWidget {
  public state: {
     items: object[];
     refine: Function;
     createURL: Function;
     widgetParams: object;
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('Breadcrumbs');
  }
  ngOnInit() {
    this.createWidget(connectBreadcrumb, {
      // instance options
      attributes: ['categories.lvl0', 'categories.lvl1'],
    });
    super.ngOnInit();
  }
}

HTML output

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="ais-Breadcrumb">
  <ul class="ais-Breadcrumb-list">
    <li class="ais-Breadcrumb-item">
      <a class="ais-Breadcrumb-link" href="#">Home</a>
    </li>
    <li class="ais-Breadcrumb-item">
      <span class="ais-Breadcrumb-separator"> &gt; </span>
      <a class="ais-Breadcrumb-link" href="#">Cameras &amp; Camcorders</a>
    </li>
    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
      <span class="ais-Breadcrumb-separator"> &gt; </span>
      Digital Cameras
    </li>
  </ul>
</div>

Did you find this page helpful?

Angular InstantSearch v3