> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/api/navigation/breadcrumb.md).

# Breadcrumb

\`ff-breadcrumb-trail\` displays active searches, filters, and advisor selections as a trail. Use item templates to customize each trail item and its separator.

## Documentation

### Default templates

When using the element without custom HTML templates, `ff-breadcrumb-trail` uses default templates.

This means that the separator, which is displayed between the `ff-breadcrumb-trail-items`, defaults to `>` and the `ff-breadcrumb-trail-item`'s `innerHTML` defaults to the `{{item.text}}` data binding.

```html
<ff-breadcrumb-trail></ff-breadcrumb-trail>
```

### Data format

The `ff-breadcrumb-trail` element reads the `breadCrumbTrail` list from the search response and renders `ff-breadcrumb-trail-item` elements from it.

Because the breadcrumb trail is closely related to `facets`, `ff-breadcrumb-trail-item` elements receive a data object composed of `item` and `facet` which can be accessed in its HTML template.

{% hint style="info" %}
The `facet` property is only populated in `ff-breadcrumb-trail-item` elements of type `filter`.
{% endhint %}

```html
<!-- Data structure
{
    facet: Facet,
    item: BreadCrumbTrailItem,
}
-->
<ff-breadcrumb-trail>
  <ff-breadcrumb-trail-item type="filter">{{facet.name}}: {{item.text}}</ff-breadcrumb-trail-item>
  <ff-breadcrumb-trail-item type="search">Facet is undefined: {{facet}}</ff-breadcrumb-trail-item>
</ff-breadcrumb-trail>
```

### Changing the separator appearance

By annotating an HTML element with the `data-separator` attribute, you tell `ff-breadcrumb-trail` to use this element as the separator template.

```html
<ff-breadcrumb-trail>
    <span data-separator>+</span>
</ff-breadcrumb-trail>
```

### Changing the item appearance

By annotating the `ff-breadcrumb-trail-item` with the `type` attribute, you can use this item as the default template for that specific breadcrumb trail type.

```html
<style>
    .searchItem {
        color: red;
        cursor: crosshair;
    }

    .filterItem {
        color: blue;
    }

    .advisorItem {
        color: green;
    }
</style>
<ff-breadcrumb-trail>
    <!-- The search item is the content of the search query-->
    <ff-breadcrumb-trail-item type="search">
        <span class="searchItem">{{item.text}}</span>
    </ff-breadcrumb-trail-item>

    <!-- Filter items are set by the URL or over the ASN-->
    <ff-breadcrumb-trail-item type="filter">
        <span class="filterItem"><strong>{{item.text}}</strong></span>
    </ff-breadcrumb-trail-item>

    <!-- Advisor items are included in the breadcrumb when an advisor-campaign is selected-->
    <ff-breadcrumb-trail-item type="advisor">
        <div class="advisorItem">{{{item.text}}}</div>
    </ff-breadcrumb-trail-item>
</ff-breadcrumb-trail>
```

### Beware of Cross Site Scripting (XSS)

{% hint style="warning" %}
In the breadcrumb trail templates, prefer double curly braces `{{ }}` for data binding.

Using triple curly braces `{{{ }}}` makes the template engine interpret the contents as actual HTML, which may run unwanted JavaScript.
{% endhint %}

This is particularly dangerous when applied to the breadcrumb trail item of type `search`.

The search term is often derived from the URL's `query` parameter. Sharing a link with a maliciously crafted `query` parameter could cause users who click it to unintentionally run 3rd party code which might attempt to, for example, steal the user's session credentials.

Please see [Template Engine](/webcomponents-overview/guides/essentials/template-engine.md) for details on data binding.

## Demo

{% embed url="<https://search-web-components.fact-finder.de/demos/5.x/ff-breadcrumb-trail>" %}

## API

### `ff-breadcrumb-trail`

#### Properties

| Name                                                                             | Description                                                                                                   |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **bread-crumb-trail-items** (Array) (default: empty)                             | The breadcrumb data from FactFinder.                                                                          |
| **show-asterisk-query** (String) **Options**: "true", "false" (default: "false") | Determines if an `ff-breadcrumb-trail-item` of type `search` is displayed for a single asterisk query ("\*"). |

#### Events

| Name            | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. |

### `ff-breadcrumb-trail-item`

#### Properties

| Name                                                                                    | Description                                     |
| --------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **bread-crumb-trail-item** (Object) (default: empty)                                    | The breadcrumb data from FactFinder.            |
| **type** (String) **Options**: "search", "filter", "all", "advisor" (default: "search") | Determines which kind of breadcrumb is present. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/api/navigation/breadcrumb.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.