diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
index 2976d05874c..ef5cb01e0b7 100644
--- a/packages/breadcrumbs/package.json
+++ b/packages/breadcrumbs/package.json
@@ -19,6 +19,7 @@
"start": "../../utils/scripts/start.sh"
},
"dependencies": {
+ "@zendeskgarden/container-breadcrumb": "^0.2.2",
"classnames": "^2.2.5"
},
"peerDependencies": {
diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md
index 50928b9969b..2057aeacc59 100644
--- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md
+++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md
@@ -1,20 +1,7 @@
-```jsx
-const { Anchor } = require('@zendeskgarden/react-buttons/src');
+## DEPRECATION WARNING
-
- {({ getContainerProps }) => (
- /* role not needed as `BreadcrumbView` is a navigation landmark. */
-
-
- -
- One
-
- -
- Two
-
- - Three
-
-
- )}
-;
-```
+This component has been deprecated in favor of the API provided in the
+[@zendeskgarden/container-breadcrumb](https://www.npmjs.com/package/@zendeskgarden/container-breadcrumb)
+package.
+
+This package will be removed in a future major release.
diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
index ef1af4deb05..df3661d1458 100644
--- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
+++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
@@ -8,6 +8,16 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
+if (process.env.NODE_ENV !== 'production') {
+ /* eslint-disable no-console */
+ console.warn(
+ 'Deprecation Warning: The `BreadcrumbContainer` component has been deprecated. ' +
+ 'It will be removed in an upcoming major release. Migrate to the ' +
+ '`@zendeskgarden/container-breadcrumb` package to continue receiving updates.'
+ );
+ /* eslint-enable */
+}
+
export default class BreadcrumbContainer extends Component {
static propTypes = {
/**
diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js
index 5e36ae77c58..6630076a3cd 100644
--- a/packages/breadcrumbs/src/elements/Breadcrumb.js
+++ b/packages/breadcrumbs/src/elements/Breadcrumb.js
@@ -8,8 +8,8 @@
import React, { Component, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { hasType } from '@zendeskgarden/react-utilities';
+import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
-import BreadcrumbContainer from '../containers/BreadcrumbContainer';
import BreadcrumbView from '../views/BreadcrumbView';
import List from '../views/List';
import Item from '../views/Item';
@@ -44,16 +44,13 @@ export default class Breadcrumb extends Component {
render() {
const { children, ...breadcrumbProps } = this.props;
+ const { getContainerProps, getCurrentPageProps } = useBreadcrumb();
return (
-
- {({ getContainerProps, getCurrentPageProps }) => (
- /* role not needed as `BreadcrumbView` is a navigation landmark. */
-
- {this.renderItems(children, getCurrentPageProps)}
-
- )}
-
+ /* role not needed as `BreadcrumbView` is a navigation landmark. */
+
+ {this.renderItems(children, getCurrentPageProps)}
+
);
}
}