Ais-Breadcrumb | Angular InstantSearch V4 (Deprecated)

Signature

<ais-breadcrumb
  [attributes]="string[]"
  // Optional parameters
  separator="string"
  rootPath="string"
  [autoHideContainer]="boolean"
></ais-breadcrumb>

1
2
3
4
5
6
7
8
import { NgAisBreadcrumbModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisBreadcrumbModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-breadcrumb component is a secondary navigation scheme that lets users 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.

Requirements

The objects to use in the breadcrumb must follow this structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  },
  {
    "objectID": "8976987",
    "name": "orange",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  }
]

It’s also possible to provide more than one path for each level:

1
2
3
4
5
6
7
8
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": ["products", "goods"],
    "categories.lvl1": ["products > fruits", "goods > to eat"]
  }
]

The attributes provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API. By default, the separator is > (with spaces) but you can use a different one by using the separator option.

If there is also a hierarchical-menu on the page, it must follow the same configuration.

Examples

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

Props

attributes

The name of the attributes to generate the menu

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

separator

The level separator used in the records.

1
2
3
4
<ais-breadcrumb
  [...]
  separator="-"
></ais-breadcrumb>

rootPath

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

1
<ais-breadcrumb rootPath="Audio > Home Audio"></ais-breadcrumb>

autoHideContainer

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

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