@zendeskgarden/container-breadcrumb

Containers relating to breadcrumb in the Garden Design System

Usage no npm install needed!

<script type="module">
  import zendeskgardenContainerBreadcrumb from 'https://cdn.skypack.dev/@zendeskgarden/container-breadcrumb';
</script>

README

@zendeskgarden/container-breadcrumb npm version

This package includes containers relating to breadcrumb in the Garden Design System.

Installation

npm install @zendeskgarden/container-breadcrumb

Usage

For live examples check out our storybook.

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.