Breadcrumb
Allows user to help understanding page location within the hierarchical structure of a website.
version
5.0.0
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 #
Breadcrumb #
Name | Type(s) | Default | Required |
---|---|---|---|
gradientBackground | any 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" /> |
Breadcrumb.Item #
Name | Type(s) | Default | Required |
---|---|---|---|
separator | string number false true ReactElement<any, string | JSXElementConstructor<any>> ReactFragment ReactPortal | ||
isActive | Boolean |
Packages #
Dependencies #
Peer dependencies #
Previous
TooltipNext
DropdownMenu