Document Locator

A document's place in a hierarchy, as clickable breadcrumb segments that navigate through an aggregation — and overflow into a dropdown when the container is too narrow.

<document-locator> renders a document's location within a tree-shaped aggregation (a folder structure, a collection hierarchy) as breadcrumbs. Clicking a segment updates the query's filters and navigates to that location, and segments that don't fit the available width move into an overflow dropdown automatically.

Minimal example

A document's collection path

result-row.component.ts

import { Component, input } from "@angular/core";
import { DocumentLocatorComponent } from "@sinequa/atomic-angular";
import type { Article } from "@sinequa/atomic";

@Component({
  selector: "result-row",
  imports: [DocumentLocatorComponent],
  template: `<document-locator [article]="article()" aggregation="Collection" />`,
})
export class ResultRowComponent {
  readonly article = input.required<Article>();
}

Options

Prop

Type

Pitfalls

What's next

Aggregation

The tree facet this component's segments ultimately filter on.