Breadcrumb

Allows user to help understanding page location within the hierarchical structure of a website.

version

4.2.2

install

yarn add @welcome-ui/breadcrumb

usage

import { Breadcrumb } from '@welcome-ui/breadcrumb'

View package View source

Usage #


<Breadcrumb>
  <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Separator #

You can customize your separator.


<Breadcrumb separator="/">
  <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

<Breadcrumb separator="-">
  <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Usage with React Router #

import { Link as RouterLink } from 'react-router-dom'
<Breadcrumb>
  <Breadcrumb.Item as={RouterLink} to="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item as={RouterLink} to="/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item as={RouterLink} to='/components/breadcrumb'>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Last child clickable #

By default we removed clickable the last child. You can change this by set to false lastChildNotClickable


<Breadcrumb lastChildNotClickable={false}>
  <Breadcrumb.Item href="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item href="/">Components</Breadcrumb.Item>
  <Breadcrumb.Item href="/">Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Properties #

Name	Type(s)	Default
gradientBackground	ThemeColors color from theme, add for scroll gradient on mobile	light.900
lastChildNotClickable	Boolean set clickable or not the last child	true
separator	string number false true ReactElement<any, string \| JSXElementConstructor<any>> ReactFragment ReactPortal	<RightIcon size="sm" />