diff --git a/.changeset/itchy-horses-travel.md b/.changeset/itchy-horses-travel.md
new file mode 100644
index 00000000000..0d2de07087f
--- /dev/null
+++ b/.changeset/itchy-horses-travel.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Rename `Breadcrumb` component to `Breadcrumbs`
diff --git a/.changeset/pretty-walls-brake.md b/.changeset/pretty-walls-brake.md
new file mode 100644
index 00000000000..f731b925620
--- /dev/null
+++ b/.changeset/pretty-walls-brake.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": major
+---
+
+Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.md
index 081a38f212b..82cb55e1e24 100644
--- a/docs/content/Breadcrumbs.md
+++ b/docs/content/Breadcrumbs.md
@@ -1,7 +1,7 @@
---
title: Breadcrumbs
status: Alpha
-source: https://github.com/primer/react/blob/main/src/Breadcrumb.tsx
+source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx
---
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
@@ -10,7 +10,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
- Do not have a section-level navigation
- May need the ability to quickly go back to the previous (parent) page
-To use Breadcrumb with [react-router](https://github.com/ReactTraining/react-router) or
+To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
`as={NavLink}` and omit the `selected` prop.
This ensures that the NavLink gets `activeClassName='selected'`
@@ -18,13 +18,13 @@ This ensures that the NavLink gets `activeClassName='selected'`
## Default example
```jsx live
-
- Home
- About
-
+
+ Home
+ About
+
Team
-
-
+
+
```
## System props
@@ -35,15 +35,15 @@ System props are deprecated in all components except [Box](/Box). Please use the
-Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
## Component props
-### Breadcrumb
+### Breadcrumbs
-The `Breadcrumb` component does not receive any additional props besides `COMMON` system props.
+The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
-### Breadcrumb.Item
+### Breadcrumbs.Item
| Prop name | Type | Default | Description |
| :-------- | :------ | :-----: | :----------------------------------------------- |
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumbs.tsx
similarity index 59%
rename from src/Breadcrumb.tsx
rename to src/Breadcrumbs.tsx
index 15eb8576616..1a2640aa8fc 100644
--- a/src/Breadcrumb.tsx
+++ b/src/Breadcrumbs.tsx
@@ -31,7 +31,7 @@ const Wrapper = styled.li`
}
`
-const BreadcrumbBase = styled.nav`
+const BreadcrumbsBase = styled.nav`
display: flex;
justify-content: space-between;
${COMMON};
@@ -39,31 +39,30 @@ const BreadcrumbBase = styled.nav`
${sx};
`
-export type BreadcrumbProps = ComponentProps
+export type BreadcrumbsProps = ComponentProps
-function Breadcrumb({className, children, theme, ...rest}: React.PropsWithChildren) {
- const classes = classnames(className, 'Breadcrumb')
+function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren) {
const wrappedChildren = React.Children.map(children, child => {child})
return (
-
+
{wrappedChildren}
-
+
)
}
-type StyledBreadcrumbItemProps = {
+type StyledBreadcrumbsItemProps = {
to?: History.LocationDescriptor
selected?: boolean
} & SystemCommonProps &
SxProp
-const BreadcrumbItem = styled.a.attrs(props => ({
+const BreadcrumbsItem = styled.a.attrs(props => ({
activeClassName: typeof props.to === 'string' ? 'selected' : '',
className: classnames(props.selected && SELECTED_CLASS, props.className),
'aria-current': props.selected ? 'page' : null
-}))`
+}))`
color: ${get('colors.accent.fg')};
display: inline-block;
font-size: ${get('fontSizes.1')};
@@ -79,9 +78,24 @@ const BreadcrumbItem = styled.a.attrs(props => ({
${sx};
`
-Breadcrumb.displayName = 'Breadcrumb'
+Breadcrumbs.displayName = 'Breadcrumbs'
-BreadcrumbItem.displayName = 'Breadcrumb.Item'
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item'
-export type BreadcrumbItemProps = ComponentProps
-export default Object.assign(Breadcrumb, {Item: BreadcrumbItem})
+export type BreadcrumbsItemProps = ComponentProps
+export default Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `` → ``)
+ */
+export const Breadcrumb = Object.assign(Breadcrumbs, {Item: BreadcrumbsItem})
+
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export type BreadcrumbProps = ComponentProps
+
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export type BreadcrumbItemProps = ComponentProps
diff --git a/src/__tests__/Breadcrumb.tsx b/src/__tests__/Breadcrumb.tsx
deleted file mode 100644
index ea345656fd3..00000000000
--- a/src/__tests__/Breadcrumb.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import {Breadcrumb} from '..'
-import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Breadcrumb', () => {
- behavesAsComponent({Component: Breadcrumb, systemPropArray: [COMMON]})
-
- checkExports('Breadcrumb', {
- default: Breadcrumb
- })
-
- it('should have no axe violations', async () => {
- const {container} = HTMLRender()
- const results = await axe(container)
- expect(results).toHaveNoViolations()
- cleanup()
- })
-
- it('renders a