npm package: @licuido-ui/ui_breadcurmbs
Description: A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.
Latest version: 4.0.1

## Breadcrumbs

A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.

### Author

- @author Vigneshwaran <vigneshwaran@crayond.co>

## Link

[Story Book Link CircleProgress](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_breadcurmbs
```

## Import component

```jsx
import { Breadcurmbs } from '@licuido-ui/ui_breadcurmbs';
```

## Usage

```jsx
<Breadcurmbs labelFontSize='16px' labelColor='#F53D3D' labelFontWeight='600' />
```

## Image

![alt text](./Breadcrumbs.png)

## Sample Code

```jsx
<Breadcurmbs
  breadcrumbs={[]}
  labelFontSize=''
  labelColor=''
  labelActiveColor=''
  labelFontWeight=''
  underLineStyle=''
  navigationIcon={<NavigationIcon />}
  linkStyle={}
  isolated={false}
/>
```

## Props

| **Name**             | Type                                                 | Default Value | Description                                                             |
| -------------------- | ---------------------------------------------------- | ------------- | ----------------------------------------------------------------------- |
| **className**        | string                                               | ''            | Additional CSS class to be applied to the component.                    |
| **sx**               | SxProps<Theme>                                       | {}            | Override or extend the styles applied using Material-UI's sx prop.      |
| **handleClick**      | React.MouseEventHandler<HTMLDivElement> \| undefined | () => false   | Navigation function.                                                    |
| **breadcrumbs**      | BreadcurmbsData[]                                    | []            | An array of objects representing each breadcrumb item.                  |
| **labelFontSize**    | string                                               | '16px'        | Font size for dynamically changing the text size.                       |
| **labelColor**       | string                                               | '#4E585E'     | Color for dynamically changing the text color.                          |
| **labelActiveColor** | string                                               | '#F53D3D'     | Color for dynamically change the text color wheather the text is active |
| **labelFontWeight**  | string                                               | '600'         | Font weight for dynamically changing the text font weight.              |
| **underLineStyle**   | 'none' or 'always' or 'hover'                        | 'none'        | Style for hovering the breadcrumbs label.                               |
| **navigationIcon**   | React.ReactNode                                      | -             | Dynamically change the separator Icon for breadcrumbs.                  |
| **linkStyle**        | SxProps<Theme>                                       | {}            | Override or extend the styles applied using                             |
| **isolated**         | boolean                                              | false         | Addition props to display another style if its boolean is true          |