Breadcrumbs

Description

A navigation component with depth tracking

See live demos on storybook

Storybook Breadcrumbs Demos

Install from Artifactory

- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
- Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
- @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
- Install the component and themes bundles
- npm i @element/react-components @element/themes
- alternatively install the component individually along with the themes bundle npm i @element/react-breadcrumbs @element/themes

Breadcrumbs Render Props

| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | -------------------------------------------- |
| children | React.ReactNode | null | false | Content to be rendered inside the component. |

Breadcrumb Render Props

| Name | Type | Default | Required | Description |
| -------- | --------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | React.ReactNode | null | false | Content to be rendered inside the component. |
| icon | React.ReactNode | 'keyboard_arrow_right' | false | Mostly commonly a string but accepts any valid markup or components. If a custom icon is used styles like color and size will need be handled with custom CSS. Please check for Material Icons docs or provide a custom icon as React Element/Component |

Breadcrumb Active Page Render Props

| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | -------------------------------------------- |
| children | React.ReactNode | null | false | Content to be rendered inside the component. |

Breadcrumb Active Page Events

| Name | Default | Required | Params | Description |
| ------- | --------- | -------- | ------ | ------------------- |
| onClick | undefined | false | | Click event handler |