@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-breadcrumbsbreadcrumbs link component.