diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/src/@primer/gatsby-theme-doctocat/nav.yml
index e831adc9b..b251ddff4 100644
--- a/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -127,6 +127,7 @@
     - title: Saving
       url: /ui-patterns/saving
 - title: Components
+  url: /components
   children:
     - title: Action bar
       url: /components/action-bar
diff --git a/src/layouts/component-layout.tsx b/src/layouts/component-layout.tsx
index 39bd98ee1..6177616db 100644
--- a/src/layouts/component-layout.tsx
+++ b/src/layouts/component-layout.tsx
@@ -1,17 +1,60 @@
 import {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header'
 import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
 import TableOfContents from '@primer/gatsby-theme-doctocat/src/components/table-of-contents'
-import {Box, Heading, Text} from '@primer/react'
+import {Box, Heading, Text, Breadcrumbs} from '@primer/react'
 import React from 'react'
+import {withPrefix} from 'gatsby'
 import {BaseLayout} from '../components/base-layout'
 import {ComponentPageNav} from '../components/component-page-nav'
+import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml'
+
+type NavItemData = {
+  title: string,
+  url?: string,
+  children?: NavItemData[]
+}
 
 export default function ComponentLayout({pageContext, children, path}) {
   const {title, description, reactId, railsIds, figmaId, cssId} = pageContext.frontmatter
 
+  const getPageAncestry = (url: string, object: NavItemData[]) => {
+    const result: NavItemData[] = []
+    const buildArray = (node: NavItemData, path: string) => {
+      if (node.url === path) {
+        result.push({title: node.title, url: node.url})
+      } else if (node.children) {
+        for (const child of node.children) {
+          buildArray(child, path)
+          if (result.length > 0) {
+            result.unshift({title: node.title, url: node.url})
+            break
+          }
+        }
+      }
+    }
+    for (const node of object) {
+      buildArray(node, url)
+      if (result.length > 0) {
+        break
+      }
+    }
+    return result
+  }
+
+  const breadcrumbData = getPageAncestry(path, navItems).filter(item => item.url)
+
   return (
     <BaseLayout title={title} description={description}>
       <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
+        {breadcrumbData.length > 1 ? (
+          <Breadcrumbs sx={{mb: 4}}>
+            {breadcrumbData.map(item => item.url ? (
+              <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
+                {item.title}
+              </Breadcrumbs.Item>
+            ): null).filter(item => item)}
+          </Breadcrumbs>
+        ) : null}
         <Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
         {description ? (
           <Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>