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
Breadcrumbs indicate the current page’s location within a navigational hierarchy and allow users to navigate through the hierarchy.

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

## Simple example

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

## Custom Separator

Separator is `/` by default. It can be changed by passing string to `separator` prop.

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

## Icons

Each route object accepts its own icon in `icon` property. Position of icon can be changed by passing `iconPosition` to component (`left` by default).

```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
      }
    ]}
  />
)
```

## Sizes

Size is `m` by default. It can be changed by changing `size` prop. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```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: '#startupjs',
          name: 'StartupJs'
        },
        {
          to: '#docs',
          name: 'Docs'
        },
        {
          to: '#component',
          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'
      }
    ]
  }}
/>