@licuido-ui/ui_breadcurmbs NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

4.0.1

8 months ago