import Br from '../Br'
import Breadcrumbs from '../Breadcrumbs'
import Div from '../Div'
import { faAnchor, faBook, faGift, faHome, faRocket } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'

# Breadcrumbs (хлебные крошки)

Хлебные крошки указывают местоположение текущей страницы в навигационной иерархии и позволяют пользователям перемещаться по ней.

```jsx
import { Breadcrumbs } from 'startupjs/ui'
```

## Простой пример

```jsx example
return (
  <Breadcrumbs
    routes={[
      {
        to: '#startupjs',
        name: 'StartupJs'
      },
      {
        to: '#docs',
        name: 'Docs'
      },
      {
        to: '#component',
        name: 'Component'
      },
      {
        to: '#Breadcrumbs',
        name: 'Breadcrumbs'
      }
    ]}
  />
)
```


## Кастомный разделитель

Разделитель по умолчанию - `/`. Его можно изменить, передав строку в свойство `separator`.

```jsx example
return (
  <Breadcrumbs
    separator='>'
    routes={[
      {
        to: '#startupjs',
        name: 'StartupJs'
      },
      {
        to: '#docs',
        name: 'Docs'
      },
      {
        to: '#component',
        name: 'Component'
      },
      {
        to: '#Breadcrumbs',
        name: 'Breadcrumbs'
      }
    ]}
  />
)
```

## Хлебные крошки с иконками
Каждый элемент маршрута принимает свою собственную иконку в свойстве `icon`. Положение иконки можно изменить, передав в компонент `iconPosition` (`left` по умолчанию).

```jsx example
return (
  <Breadcrumbs
    separator='>'
    routes={[
      {
        to: '#startupjs',
        name: 'StartupJs',
        icon: faRocket
      },
      {
        to: '#docs',
        name: 'Docs',
        icon: faBook
      },
      {
        to: '#component',
        name: 'Component',
        icon: faGift
      },
      {
        to: '#Breadcrumbs',
        name: 'Breadcrumbs',
        icon: faAnchor
      }
    ]}
  />
)
```

## Размеры

Размер по умолчанию - `m`. Его можно изменить, изменив свойство `size`. Возможные значения свойства можно найти в разделе `Песочница` внизу страницы.

```jsx example
return (
  <Div>
    <Breadcrumbs
      size='l'
      routes={[
        {
          to: '#startupjs',
          name: 'StartupJs'
        },
        {
          to: '#docs',
          name: 'Docs'
        },
        {
          to: '#component',
          name: 'Component'
        },
        {
          to: '#Breadcrumbs',
          name: 'Breadcrumbs'
        }
      ]}
    />
    <Br />
    <Breadcrumbs
      size='s'
      routes={[
        {
          to: '#',
          name: 'StartupJs'
        },
        {
          to: '#',
          name: 'Docs'
        },
        {
          to: '#',
          name: 'Component'
        },
        {
          to: '#Breadcrumbs',
          name: 'Breadcrumbs'
        }
      ]}
    />
  </Div>
)
```

## Sandbox

<Sandbox
  Component={Breadcrumbs}
  props={{
    routes: [
      {
        icon: faHome,
        to: '#',
        name: 'Home'
      },
      {
        to: '#',
        name: 'Section'
      },
      {
        to: '#',
        name: 'Page'
      },
      {
        to: '#sandbox',
        name: 'Sandbox'
      }
    ]
  }}
/>