> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/lists/breadcrumbs.md).

# Breadcrumbs

Usually this component is placed on the top of the page and shows all the way to the page. User can click on any link and navigate to this page. You can make breadcrumb item as link (if you use `href` prop) or a button (if you use `onClick` prop). 

```tsx
import { Breadcrumbs, BreadcrumbLink } from 'altrone-ui';

const LINKS: BreadcrumbLink[] = [{
    title: 'Dashboard',
    href: '/dashboard'
}, {
    title: 'Statistics',
    href: '/dashboard/stats'
}]

return <Breadcrumbs links={LINKS} showHomeLink />
```

### <mark style="color:blue;">BreadcrumbLink</mark>

```typescript
interface BreadcrumbLink {
  title: string;
  href?: string;
  onClick?: () => void;
  icon?: JSX.Element;
}
```

## Properties

| Property            | Type                                    | Description                                                                            |
| ------------------- | --------------------------------------- | -------------------------------------------------------------------------------------- |
| **`links`**         | [`BreadcrumbLink`](#breadcrumblink)`[]` | Array of links                                                                         |
| **`showHomeLink`**  | `boolean`                               | Show home button                                                                       |
| **`collapsible`**   | `boolean`                               | If true it shows only the first and the last links. Rest links are hidden behind "..." |
| **`disabled`**      | `boolean`                               | Marks all links as disabled                                                            |
| **`HomeComponent`** | `() => JSX.Element`                     | Custom home link                                                                       |
| **`onHomeClick`**   | `() => void`                            | Callback fires when user clicks on home button                                         |
| **`homepageHref`**  | `string`                                | Makes homepage as link with this url. Default value is `'/'`                           |
| **`className`**     | `string`                                | Custom CSS class                                                                       |

## History

* **`Altrone 2.0`**: initial release