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 [email protected]

Link

Story Book Link CircleProgress

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_breadcurmbs

Import component

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

Usage

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

Image

Sample Code

<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 | {} | Override or extend the styles applied using Material-UI's sx prop. | | handleClick | React.MouseEventHandler | 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 | {} | Override or extend the styles applied using | | isolated | boolean | false | Addition props to display another style if its boolean is true |