WUI logo

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'

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 #

NameType(s)DefaultRequired
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" />
NameType(s)DefaultRequired
separator
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
Iterable<ReactNode>
ReactPortal

Packages #

Dependencies #
Peer dependencies #