# Breadcrumbs

(part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

Breadcrumb is a navigation component that displays a series of links representing the current navigation path.\
It is typically used to help users navigate hierarchical structures within an application.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### autoRemoveWhenClicked

When true, a breadcrumb item is automatically removed from the trail after it is clicked. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### breadcrumbs

An array of breadcrumb items representing the entire breadcrumb trail. Type: [Array\<CustomType\<bootstrapextracomponents-breadcrumbs.crumb>>](#crumb)

***

### crumbStyleClass

CSS style classes applied to individual breadcrumb items. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### lastCrumbStyleClass

CSS style classes applied to the last breadcrumb item in the trail. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### location

The position of the breadcrumb component on the form. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md)

***

### styleClass

Additional CSS style classes to be applied to the breadcrumb container. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### visible

Flag indicating whether the breadcrumb component is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onCrumbClicked(event,crumb,index)

Called whenever a breadcrumb item is clicked with the JSEvent and the item clicked on.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the click event e.g. target element, mouse coordinates
> * {[CustomType\<bootstrapextracomponents-breadcrumbs.crumb>](#crumb)} crumb The breadcrumb item that was clicked
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The index of the clicked breadcrumb item in the items array

***

## API

### addCrumb(crumb)

Adds a crumb at the end

**Parameters:**

> * {[CustomType\<bootstrapextracomponents-breadcrumbs.crumb>](#crumb)} crumb A breadcrumb object to be added at the end of the breadcrumb trail.

***

### removeCrumbsAfter(index)

Removes all crumbs after the given index

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index after which all breadcrumbs will be removed.

***

### removeLastCrumb()

Removes the last crumb

***

### setCrumbs(crumbs)

Sets all crumbs

**Parameters:**

> * {[Array\<CustomType\<bootstrapextracomponents-breadcrumbs.crumb>>](#crumb)} crumbs An array of breadcrumb objects to set as the entire breadcrumb trail.

***

## Types

## crumb

Represents an individual breadcrumb item. scripting type: CustomType\<bootstrapextracomponents-breadcrumbs.crumb>

* crumbId
  * Unique identifier for the breadcrumb item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* displayName
  * The display name or label of the breadcrumb item.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/navigation/breadcrumbs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.