import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import BreadCrumbs from '../BreadCrumbs';
import { breadCrumbsMock } from '../../../../mocks/product/breadCrumbs';

<Meta title="Atoms/BreadCrumbs" component={BreadCrumbs} />


# BreadCrumbs
<br />

## `BreadCrumbs` show the path to the current page.
<br />

### Default
<Canvas>
    <Story name="Default">
        <BreadCrumbs
            {...breadCrumbsMock}
        />
    </Story>
</Canvas>

## Usage Example

```jsx
import BreadCrumbs from '@appdirect/sfb-theme-components/src/atoms/bread-crumbs/BreadCrumbs';

<BreadCrumbs
    activeColor="pink"
    inactiveColor="violet"
    crumbs={[
        {
            name: 'Faqs',
            link: '/faqs'
        },
        {
            name: 'Settings',
            link: '/settings'
        },
        {
            name: 'Profile',
            link: '/profile'
        }
    ]}
/>

```
## Props

<ArgsTable of={BreadCrumbs} />
