WUI logo

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'

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 #

NameType(s)DefaultRequired
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" />
NameType(s)DefaultRequired
separator
string
number
false
true
ReactElement<any, string | JSXElementConstructor<any>>
ReactFragment
ReactPortal
isActive
Boolean

Packages #

Dependencies #
Peer dependencies #