# Component: Breadcrumbs

**Purpose**: Allows users to view a trail of links separated with a "/". This is helpful for user navigation when you have nested options.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-rfnbnfqzuj.chromatic.com/?path=/story/shop-components-layout-breadcrumbs--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

## Props

| **Prop ID**                  | **Prop Label**     | **Type** | **Default value**                                                                                                                                                                                        | **options/info** |
| ---------------------------- | ------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| linkUnderline                | Underline links?   | boolean  | false                                                                                                                                                                                                    |                  |
| dividers                     | Show dividers      | boolean  | true                                                                                                                                                                                                     |                  |
| dividerColor\_\_limio\_color | Divider color      | color    | #000000                                                                                                                                                                                                  |                  |
| header                       | Breadcrumbs Header | string   | My Account                                                                                                                                                                                               |                  |
| breadcrumbs                  | Breadcrumbs        | list     | <p>\[<br>{<br>"text": "Manage My Account",<br>"url": "/mma"<br>},<br>{<br>"text": "Cancel",<br>"url": "/cancel"<br>},<br>{<br>"text": "Change Payment Method",<br>"url": "/change-payment"<br>}<br>]</p> |                  |