> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/breadcrumb.md).

# Breadcrumb

The `Breadcrumb` component displays the path to the current resource using a hierarchy of links.

### Preview

<div align="left"><figure><img src="/files/xHEOJE7M7kUJwIdAQixP" alt="Gravity breadcrumb component" width="139"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Breadcrumb } from 'components/lib';

function MyComponent({ ...props }){

  const items = [
    { name: 'Home', url: '/' },
    { name: 'Dashboard', url: '/dashboard' },
    { name: 'Settings', url: '/dashboard/settings' }
  ];

  return (
    <div>
      <Breadcrumb items={ items } />
    </div>
  );
}
```

### Props

| Prop  | Description               | Required | Value                                            |
| ----- | ------------------------- | -------- | ------------------------------------------------ |
| items | array of breadcrumb items | required | array of objects ({ name: string, url: string }) |

### Notes

* The `Breadcrumb` component uses the `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, and `BreadcrumbEllipsis` sub-components.
* The `items` prop specifies the list of breadcrumb items, each containing a `name` and `url`.
* The `BreadcrumbSeparator` component provides a separator between breadcrumb items, defaulting to a right chevron icon.
* The `BreadcrumbEllipsis` component can be used to indicate more items in the breadcrumb path.
* For more details, refer to the [Shadcn Breadcrumb documentation](https://ui.shadcn.com/docs/components/breadcrumb).