> For the complete documentation index, see [llms.txt](https://nour-eldin-shobier.gitbook.io/carbon-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nour-eldin-shobier.gitbook.io/carbon-flutter/widgets/todo-breadcrumb.md).

# Breadcrumb

The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.

![](/files/-MjReG02-wX5ldkP5V8Q)

### Widget API

{% tabs %}
{% tab title="CBreadcrumb" %}

| Property         | Description                                                                                                                                                                                              |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children         | <p>A list of <code>CBreadcrumbItem</code> to display in a row.</p><ul><li><strong>Type:</strong> <code>List\<CBreadcrumbItem></code></li><li><strong>Default:</strong> required</li></ul>                |
| noTrailingSlash  | <p>Whether to omit the trailing slash for the breadcrumbs or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                      |
| breadcrumbsLimit | <p>To truncate the breadcrumbs when <code>children</code> length exceeds <code>breadcrumbsLimit</code>.</p><ul><li><strong>Type:</strong> <code>int</code></li><li><strong>Default:</strong> 3</li></ul> |
| {% endtab %}     |                                                                                                                                                                                                          |

{% tab title="CBreadcrumbItem" %}

| Property      | Description                                                                                                                                                                             |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| child         | <p>The content of the breadcrumb item.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                       |
| onTap         | <p>Called when the item is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback</code></li><li><strong>Default:</strong> required</li></ul>                                     |
| isCurrentPage | <p>Whether this breadcrumb item represents the current page or not.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> <code>true</code></li></ul> |
| {% endtab %}  |                                                                                                                                                                                         |
| {% endtabs %} |                                                                                                                                                                                         |

### Example

```dart
CBreadcrumb(
    breadcrumbsLimit: 4,
    noTrailingSlash: false,
    children: [
      CBreadcrumbItem(child: CText(data: 'one'), onTap: () {}),
      CBreadcrumbItem(child: CText(data: 'two'), onTap: () {}),
      CBreadcrumbItem(child: CText(data: 'three'), onTap: () {}),
      CBreadcrumbItem(
        child: CText(data: 'four'),
        isCurrentPage: true,
        onTap: () {},
      ),
      CBreadcrumbItem(child: CText(data: 'five'), onTap: () {}),
    ],
  );
```