WUI logo

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'

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 #

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

Packages #

Dependencies #
Peer dependencies #