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 #
Breadcrumb #
Name | Type(s) | Default | Required |
---|---|---|---|
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" /> |
Breadcrumb.Item #
Name | Type(s) | Default | Required |
---|---|---|---|
separator | string number false true {} ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal |
Packages #
Dependencies #
Peer dependencies #
Previous
TooltipNext
DropdownMenu