diff --git a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
new file mode 100644
index 00000000..9873fb8a
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/new-york/ui/breadcrumb'
+
+const route = useRoute()
+
+interface Item {
+  title: string
+  href: string
+}
+
+function generateBreadcrumb(url: string): Item[] {
+  const breadcrumbItems: Item[] = []
+  const segments = url.split('/').filter(segment => segment !== '') // Remove empty segments
+
+  // Construct breadcrumb for each segment
+  let href = ''
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i].replace('.html', '')
+    href += `/${segment}`
+    breadcrumbItems.push({ title: segment, href })
+  }
+  return breadcrumbItems
+}
+
+const breadcrumbs = computed(() => generateBreadcrumb(route.path))
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.title">
+        <BreadcrumbItem>
+          <BreadcrumbLink
+            class="capitalize"
+            :href="index === 0 ? undefined : breadcrumb.href"
+            :class="{ 'text-foreground': index === breadcrumbs.length - 1 }"
+          >
+            {{ breadcrumb.title }}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+      </template>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 195c5db7..c46b3d11 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -3,6 +3,7 @@ import { useData, useRoute } from 'vitepress'
 import { docsConfig } from '../config/docs'
 import TableOfContentVue from '../components/TableOfContent.vue'
 import EditLink from '../components/EditLink.vue'
+import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
@@ -65,15 +66,7 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
             <TableOfContentVue />
           </div>
 
-          <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-            <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-              Docs
-            </div>
-            <ChevronRightIcon class="h-4 w-4" />
-            <div class="font-medium text-foreground">
-              {{ frontmatter.title }}
-            </div>
-          </div>
+          <DocsBreadcrumb class="mb-4" />
 
           <div class="space-y-2">
             <div class="flex items-center space-x-4">
diff --git a/apps/www/src/content/docs/components.md b/apps/www/src/content/docs/components.md
new file mode 100644
index 00000000..6e85bd2f
--- /dev/null
+++ b/apps/www/src/content/docs/components.md
@@ -0,0 +1,6 @@
+<script setup>
+import { useRouter } from 'vitepress'
+
+const router = useRouter()
+router.go('/docs/components/accordion')
+</script>