Breadcrumb

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

version

5.0.0-alpha.16

install

yarn add @welcome-ui/breadcrumb

usage

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

View package View source

Usage #

Separator #

You can customize your separator.

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

Properties #

Name	Type(s)	Default
gradientBackground	{ 'primary-100': string; 'primary-200': string; 'primary-500': string; 'primary-600': string; 'primary-700': string; 'primary-800': string; 'primary-900': string; 'success-100': string; 'success-200': string; ... 47 more ...; underline: string; } 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="xs" />