@zendeskgarden/container-breadcrumb
This package includes containers relating to breadcrumbs in the Garden Design
System.
Installation
npm install @zendeskgarden/container-breadcrumb
Usage
This container implements the
breadcrumb design
pattern and can be used to build a breadcrumb component. Check out
storybook for live examples.
As a Render Prop Component
import { BreadcrumbContainer } from '@zendeskgarden/container-breadcrumb';
<BreadcrumbContainer>
{(getContainerProps, getCurrentPageProps) => (
<div {...getContainerProps()}>
<a href="#">Home</a>
<a {...getCurrentPageProps({ href: '#' })}>Items</a>
</div>
)}
</BreadcrumbContainer>;
As a hook
import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
const Breadcrumb = () => {
const { getContainerProps, getCurrentPageProps } = useBreadcrumb();
return (
<div {...getContainerProps()}>
<a href="#">Home</a>
<a {...getCurrentPageProps({ href: '#' })}>Items</a>
</div>
);
};
Info
See react-breadcrumbs component.