# Breadcrumbs

The Breadcrumbs component is a navigation aid that helps users understand their current position within a product’s hierarchy. It improves user orientation and facilitates smooth backwards navigation, particularly in multi-level interfaces.

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FAFj0ltiLqbDoepWHofhU%2Fimage.png?alt=media&#x26;token=d2ac4974-f165-4d39-a5a1-2d6338abeaae" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Component React" %}

```
// Sample code

 <BreadCrumb
    crumbs={[
      {
        content: 'Home',
        show: true,
        icon: <SVG.Home fill={"#C84C0E"} />,
      },
      {
        content: 'Previous',
        show: true,
        icon: <SVG.Person fill={"#C84C0E"} />,
      },
      {
        content: 'Current',
        show: true,
        icon: <SVG.Edit fill={"#787878"} />,
      }
    ]}
   />
```

{% endtab %}

{% tab title="Component Flutter" %}

```
// Sample code

DigitBreadCrumb(
          crumbs: [
            DigitBreadCrumbItem(
              content: 'Home',
              icon: Icons.home,
            ),
            DigitBreadCrumbItem(
              content: 'Category',
              icon: Icons.category,
            ),
            DigitBreadCrumbItem(
              content: 'Product',
              icon: Icons.production_quantity_limits,
            ),
            DigitBreadCrumbItem(
              content: 'Details',
              icon: Icons.details,
            ),
          ],
          onClick: (item) {},
          customSeparator: Icon(Icons.chevron_right),
        );
```

{% endtab %}

{% tab title="Component Design" %}

{% endtab %}
{% endtabs %}

## Anatomy

***

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FLkmEt75ZW7CyLjNEux5n%2Fimage.png?alt=media&#x26;token=0d2f875c-5bc4-46fb-9936-1c5e0c747d41" alt=""><figcaption></figcaption></figure>

## Variants

***

<table data-header-hidden><thead><tr><th width="321"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FD5F4nVZIEKItxFNDrZmT%2Fimage.png?alt=media&#x26;token=3e5f7853-50a0-4a58-8056-c78d5f8cbd99" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>Basic</strong></p><p>Displays the full navigation path linearly, and it's best used when the number of breadcrumb items is limited and space is sufficient.</p></td></tr><tr><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FcLC2yLK8q0SWumNOnYZk%2Fimage.png?alt=media&#x26;token=0998898b-644f-423d-9708-c1c5d18bbbaf" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>Collapsed</strong></p><p>Compresses middle items into an ellipsis (...) for better scalability, and it's ideal for complex or deeply nested paths to maintain a clean layout.</p></td></tr><tr><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FvdvsUE0MVVTd5MGrh6X1%2Fimage.png?alt=media&#x26;token=38b9b4b8-9a5e-42cd-a1b3-6ce6aed1ec2f" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>With Custom Separators</strong></p><p>Uses stylised or alternate separators like arrows (→) instead of slashes, and it enhances visual hierarchy and readability based on context or brand style.</p></td></tr><tr><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FR9wWaFKlm9BKO1bKeBaQ%2Fimage.png?alt=media&#x26;token=8e4c5403-8a4f-4553-9c2d-f129127b6992" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>With Icons</strong></p><p>Includes relevant icons alongside each breadcrumb label.<br>Helps with quicker recognition and improves usability, especially for users with lower literacy or cognitive load.</p></td></tr></tbody></table>

***

## Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

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

<table><thead><tr><th width="257">Property</th><th>Value</th><th>Default</th></tr></thead><tbody><tr><td>crumbs</td><td>text</td><td>-</td></tr><tr><td>className</td><td>text</td><td>no</td></tr><tr><td>style</td><td>yes/no</td><td>no</td></tr><tr><td>spanStyle</td><td>yes/no</td><td>-</td></tr><tr><td>customSeperator</td><td>number</td><td>-</td></tr><tr><td>maxItems</td><td>yes/no</td><td>-</td></tr><tr><td>itemsBeforeCollapse</td><td>yes/no</td><td>no</td></tr><tr><td>itemsAfterCollapse</td><td>yes/no</td><td>no</td></tr><tr><td>expandText</td><td>yes/no</td><td>no</td></tr><tr><td>itemStyle</td><td>number</td><td>no</td></tr></tbody></table>
{% endtab %}

{% tab title="Flutter" %}

<table><thead><tr><th>Property</th><th width="209">Value</th><th>Default</th></tr></thead><tbody><tr><td>crumbs</td><td>List&#x3C;DigitBreadCrumbItem></td><td>required</td></tr><tr><td>maxItems</td><td>int</td><td>-</td></tr><tr><td>itemsBeforeCollapse</td><td>int</td><td>-</td></tr><tr><td>itemsAfterCollapse</td><td>int</td><td>-</td></tr><tr><td>expandText</td><td>String</td><td>-</td></tr><tr><td>customSeparator</td><td>Widget</td><td>-</td></tr><tr><td>themeData</td><td>DigitBreadCrumbThemeData</td><td>-</td></tr><tr><td>onClick</td><td>VoidCallBack Function</td><td>-</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

## Behaviours

|                                                                                                                                                                                                                                                                                            |                                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FMWvwq1Ooz2OuaynHsVx8%2Fimage.png?alt=media&#x26;token=3fb0f822-abe5-4ec2-bb4a-6005a94e479e" alt=""><figcaption></figcaption></figure></div> | <p><strong>Clickable Navigation</strong></p><p>All breadcrumb items (except the current page) are clickable, enabling users to quickly jump to previous steps or levels in their journey.</p>                                          |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F8lnNkKcMaoai5E19qTbc%2Fimage.png?alt=media&#x26;token=5bf92b62-d53b-4fd6-a784-067452cc234a" alt=""><figcaption></figcaption></figure></div> | <p><strong>Responsive Collapsing</strong></p><p>Breadcrumbs automatically adjust and collapse middle items when the screen width is limited, ensuring the component remains compact and accessible on mobile or smaller viewports.</p> |

***

## Usage Guide

***

| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F1eO8t8mlv3ZFNLtT9Tvs%2Fimage.png?alt=media&#x26;token=df2aba34-e983-4b32-8e1b-4eb4c9da611c" alt=""><figcaption></figcaption></figure></div> | <p><strong>Use breadcrumbs to show hierarchy</strong></p><p>Maintain a consistent hierarchical structure for breadcrumbs, as they provide users with a clear path for navigation and context about their current location.

</p><p>Use breadcrumbs for anything other than navigating a linear hierarchy. They should not serve as interactive elements for actions like filtering or other functionalities.</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FqL9y7N1mRwS614j7qZ4G%2Fimage.png?alt=media&#x26;token=3336102a-9467-4a11-b8f3-2a91426757e2" alt=""><figcaption></figcaption></figure></div> |                                                                                                                                                                                                                                                                                                                                                                                                                  |

## Changelog

***

| Date         | Number  | Notes                                                                                           |
| ------------ | ------- | ----------------------------------------------------------------------------------------------- |
| Dec 15, 2024 | v-0.0.2 | <p>This component is added to the website.<br>This component is now individually versioned.</p> |

## Design Checklist

***

<table data-header-hidden><thead><tr><th width="129" data-type="checkbox"></th><th></th></tr></thead><tbody><tr><td>true</td><td><strong>All interactive states</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible use of colours</strong> - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)</td></tr><tr><td>true</td><td><strong>Accessible contrast for text</strong> - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).</td></tr><tr><td>true</td><td><strong>Accessible contrast for UI components</strong> - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).</td></tr><tr><td>true</td><td><strong>Keyboard interactions</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>false</td><td><strong>Screen reader accessible</strong> - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.</td></tr><tr><td>true</td><td><strong>Responsive for all breakpoints</strong> - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop</td></tr><tr><td>true</td><td><strong>Usage guidelines</strong> - Includes a list of dos and don'ts that highlight best practices and common mistakes.</td></tr><tr><td>false</td><td><strong>Content guidelines</strong> - Content standards and usage guidelines for writing and formatting in-product content for the component.</td></tr><tr><td>true</td><td><strong>Defined variants and properties</strong> - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)</td></tr><tr><td>true</td><td><strong>Defined behaviours</strong> - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.</td></tr><tr><td>true</td><td><strong>Design Kit</strong> - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.</td></tr></tbody></table>