import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Star } from '@useblu/ocean-icons-react';
import Breadcrumb from '../Breadcrumb';

<Meta title="Components/Breadcrumb" component={Breadcrumb} />

# Badge APIs

The API documentation of the Breadcrumb React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Breadcrumb } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Breadcrumb
      items={[
        <a href="/" rel="noopener noreferrer">
          Home
        </a>,
        <a href={`/page-1`} rel="noopener noreferrer">
          Page 1
        </a>,
        <a href={`/page-2`} rel="noopener noreferrer">
          Page 2
        </a>,
        'Page 4',
      ]}
    />
  </Story>
</Canvas>

## CSS

| Global class    | Description                         |
| --------------- | ----------------------------------- |
| .ods-breadcrumb | Styles applied to the root element. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Breadcrumb/Breadcrumbs.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      items: [
        <a href="/" rel="noopener noreferrer">
          Home
        </a>,
        <a href={`/page-1`} rel="noopener noreferrer">
          Page 1
        </a>,
        <a href={`/page-2`} rel="noopener noreferrer">
          Page 2
        </a>,
        'Page 4',
      ],
    }}
    argTypes={{
      items: {
        control: { type: 'object' },
      },
    }}
  >
    {(props) => <Breadcrumb {...props} />}
  </Story>
</Canvas>
