# Breadcrumbs
Package: @thinker-core/mantine-core
Import: import { Breadcrumbs } from '@thinker-core/mantine-core';

## Usage

`Breadcrumbs` component accepts any number of React nodes as children
and adds a given separator (defaults to `/`) between them:

```tsx
import { Breadcrumbs, Anchor } from '@thinker-core/mantine-core';

const items = [
  { title: 'Mantine', href: '#' },
  { title: 'Mantine hooks', href: '#' },
  { title: 'use-id', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function Demo() {
  return (
    <>
      <Breadcrumbs>{items}</Breadcrumbs>
      <Breadcrumbs separator="→" separatorMargin="md" mt="xs">
        {items}
      </Breadcrumbs>
      <Breadcrumbs>
        {items}
        <Text>With text</Text>
      </Breadcrumbs>
    </>
  );
}
```


## Max items

`Breadcrumbs` component accepts `maxItems` prop to limit the number of items which will show `ellipsis` (default to `...`) when there are more items than the limit.

```tsx
import { Breadcrumbs, Anchor } from '@thinker-core/mantine-core';

const items = [
  { title: '1', href: '#' },
  { title: '2', href: '#' },
  { title: '3', href: '#' },
  { title: '4', href: '#' },
  { title: '5', href: '#' },
  { title: '6', href: '#' },
  { title: '7', href: '#' },
  { title: '8', href: '#' },
  { title: '9', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function Demo() {
  return (
    <>
      <Breadcrumbs maxItems={5}>{items}</Breadcrumbs>
    </>
  );
}
```


## Ellipsis

`Breadcrumbs` component accepts `ellipsis` prop to customize the ellipsis element.

The `ellipsis` element is a clickable element that will show all the items when clicked.

```tsx
import { Breadcrumbs, Anchor } from '@thinker-core/mantine-core';

const items = [
  { title: '1', href: '#' },
  { title: '2', href: '#' },
  { title: '3', href: '#' },
  { title: '4', href: '#' },
  { title: '5', href: '#' },
  { title: '6', href: '#' },
  { title: '7', href: '#' },
  { title: '8', href: '#' },
  { title: '9', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function Demo() {
  return (
    <>
      <Breadcrumbs maxItems={5} ellipsis="😂">{items}</Breadcrumbs>
    </>
  );
}
```



#### Props

**Breadcrumbs props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | React.ReactNode | required | React nodes that should be separated with `separator` |
| ellipsis | React.ReactNode | - | Ellipsis element |
| maxItems | number | - | If provided, shows only the first item and last `maxItems - 2` items, replacing middle items with an ellipsis |
| separator | React.ReactNode | - | Separator between children |
| separatorMargin | MantineSpacing | - | Controls spacing between separator and breadcrumb |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |


#### Styles API

Breadcrumbs component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**Breadcrumbs selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Breadcrumbs-root | Root element |
| separator | .mantine-Breadcrumbs-separator | Separator between children |
| breadcrumb | .mantine-Breadcrumbs-breadcrumb | Breadcrumb item |
| ellipsis | .mantine-Breadcrumbs-ellipsis | Ellipsis when `maxItems` prop is set |

**Breadcrumbs CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --bc-separator-margin | Control left and right `margin` of separator |