oute-ds-bread-crumbs v2.2.18

oute-ds-bread-crumbs

This component is used to render breadcrumbs.

Usage

import BreadCrumbs from 'oute-ds-bread-crumbs';

<BreadCrumbs
  containerStyles={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 500,
  }}
  items={[
    {
      title: 'digihealth',
      disabled: false,
      style: {width: '7rem', fontWeight: 400},
      leftIcon: {image: 'https://picsum.photos/200'},
    },
    {
      title: 'digihealth 1',
      disabled: false,
      icon: () => (
        <Icon IconName="Folder" iconProps={{size: 24}} variant="ORANGE" />
      ),
    },
    {
      title: 'digihealth 2',
      disabled: false,
      icon: () => (
        <Icon IconName="Folder" iconProps={{size: 24}} variant="ORANGE" />
      ),
    },
    {
      title: 'digihealth 3',
      disabled: false,
      icon: () => (
        <Icon IconName="Folder" iconProps={{size: 24}} variant="ORANGE" />
      ),
    },
    {
      title: 'Pan Forms',
      leftIcon: {name: 'FlashOffFilled'},
      rightIcon: {name: 'ChevronDown'},
      style: {width: '9.1rem', fontWeight: 400},
      subOptions: [
        {
          title: 'Version',
          disabled: false,
          icon: () => <Icon IconName="Cloud" iconProps={{size: 24}} />,
        },
        {
          title: 'Rename',
          disabled: false,
          icon: () => <Icon IconName="Pen" iconProps={{size: 24}} />,
        },
        {
          title: 'Duplicate',
          disabled: false,
          icon: () => <Icon IconName="Copy" iconProps={{size: 24}} />,
        },
      ],
    },
  ]}
/>

Detailed examples: [here](https://design.gofo.app/?path=/story/packages-breadcrumbs--primary)