Breadcrumb

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

version

4.1.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 renderChildrenAs={RouterLink}>
  <Breadcrumb.Item to="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item to="/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item to='/components/breadcrumb'>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Properties #

Name	Type(s)	Default
gradientBackground	ThemeColors color from theme, add for scroll gradient on mobile	light.900
renderChildrenAs	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal	a
separator	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal	<RightIcon size="sm" />