IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Breadcrumb

Preview

Home

...

Album

Song

Show code

<Breadcrumb
  separator="arrow"
  items={[
    { label: "Home", value: "/home" },
    { label: "Music", value: "/music" },
    { label: "Genre", value: "/genre" },
    { label: "Album", value: "/album" },
    { label: "Song", value: "/song" },
  ]}
  itemsBeforeCollapse={1}
  itemsAfterCollapse={2}
  hasCollapse={true}
  disabled={false}
  onClick={handleClick}
/>

Docs

Name	Description	Default	Control
separator	Separator character	"arrow"	arrow slash
itemsBeforeCollapse	Number of items before collapse	1
itemsAfterCollapse	Number of items after collapse	2
hasCollapse	Breadcrumb is collapsible or not	false	falsetrue
disabled	Disabled Breadcrumb	false	falsetrue
items *	List of items `Array<{ label: string, value: string }>`	-	-
className	Wrapper class	-	-
itemClassName	Breadcrumb item class	-	-
labelClassName	Breadcrumb label class	-	-
separatorClassName	Breadcrumb separator class	-	-
onClick	Click Breadcrumb handler	-	-

IT Tools

Tools

UI Components

Breadcrumb

Preview

Docs