diff --git a/apps/v4/components/demo/BreadcrumbCollapsedDemo.vue b/apps/v4/components/demo/BreadcrumbCollapsedDemo.vue
new file mode 100644
index 000000000..8f20f716b
--- /dev/null
+++ b/apps/v4/components/demo/BreadcrumbCollapsedDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york-v4/ui/breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <a href="/">Home</a>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <a href="/docs/components">Components</a>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/v4/components/demo/BreadcrumbCustomSeparatorDemo.vue b/apps/v4/components/demo/BreadcrumbCustomSeparatorDemo.vue
new file mode 100644
index 000000000..05ee5c371
--- /dev/null
+++ b/apps/v4/components/demo/BreadcrumbCustomSeparatorDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { SlashIcon } from 'lucide-vue-next'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york-v4/ui/breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <a href="/">Home</a>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <a href="/docs/components">Components</a>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/v4/components/demo/BreadcrumbDropdownDemo.vue b/apps/v4/components/demo/BreadcrumbDropdownDemo.vue
new file mode 100644
index 000000000..6aaf8ffa0
--- /dev/null
+++ b/apps/v4/components/demo/BreadcrumbDropdownDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ChevronDownIcon, SlashIcon } from 'lucide-vue-next'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york-v4/ui/breadcrumb'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york-v4/ui/dropdown-menu'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <a href="/">Home</a>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            class="flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5"
+          >
+            Components
+            <ChevronDownIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem>Documentation</DropdownMenuItem>
+            <DropdownMenuItem>Themes</DropdownMenuItem>
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/v4/components/demo/BreadcrumbLinkDemo.vue b/apps/v4/components/demo/BreadcrumbLinkDemo.vue
new file mode 100644
index 000000000..fdcd5debe
--- /dev/null
+++ b/apps/v4/components/demo/BreadcrumbLinkDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york-v4/ui/breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <NuxtLink to="/">
+            Home
+          </NuxtLink>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <NuxtLink to="/docs/components">
+            Components
+          </NuxtLink>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/v4/components/demo/BreadcrumbResponsiveDemo.vue b/apps/v4/components/demo/BreadcrumbResponsiveDemo.vue
new file mode 100644
index 000000000..399fa7664
--- /dev/null
+++ b/apps/v4/components/demo/BreadcrumbResponsiveDemo.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+import { useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york-v4/ui/breadcrumb'
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/registry/new-york-v4/ui/drawer'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york-v4/ui/dropdown-menu'
+
+const items = [
+  { href: '#', label: 'Home' },
+  { href: '#', label: 'Documentation' },
+  { href: '#', label: 'Building Your Application' },
+  { href: '#', label: 'Data Fetching' },
+  { label: 'Caching and Revalidating' },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+const open = ref(false)
+const isDesktop = useMediaQuery('(min-width: 768px)')
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <NuxtLink :to="items[0].href || '/'">
+            {{ items[0].label }}
+          </NuxtLink>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <template v-if="items.length > ITEMS_TO_DISPLAY">
+        <BreadcrumbItem>
+          <template v-if="isDesktop">
+            <DropdownMenu v-model:open="open">
+              <DropdownMenuTrigger
+                class="flex items-center gap-1"
+                aria-label="Toggle menu"
+              >
+                <BreadcrumbEllipsis class="size-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="(item, index) in items.slice(1, -2)"
+                  :key="index"
+                >
+                  <NuxtLink :to="item.href || '#'">
+                    {{ item.label }}
+                  </NuxtLink>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </template>
+          <template v-else>
+            <Drawer v-model:open="open">
+              <DrawerTrigger aria-label="Toggle Menu">
+                <BreadcrumbEllipsis class="h-4 w-4" />
+              </DrawerTrigger>
+              <DrawerContent>
+                <DrawerHeader class="text-left">
+                  <DrawerTitle>Navigate to</DrawerTitle>
+                  <DrawerDescription>
+                    Select a page to navigate to.
+                  </DrawerDescription>
+                </DrawerHeader>
+                <div class="grid gap-1 px-4">
+                  <NuxtLink
+                    v-for="(item, index) in items.slice(1, -2)"
+                    :key="index"
+                    :to="item.href || '#'"
+                    class="py-1 text-sm"
+                  >
+                    {{ item.label }}
+                  </NuxtLink>
+                </div>
+                <DrawerFooter class="pt-4">
+                  <DrawerClose as-child>
+                    <Button variant="outline">
+                      Close
+                    </Button>
+                  </DrawerClose>
+                </DrawerFooter>
+              </DrawerContent>
+            </Drawer>
+          </template>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+      </template>
+      <BreadcrumbItem
+        v-for="(item, index) in items.slice(-ITEMS_TO_DISPLAY + 1)"
+        :key="index"
+      >
+        <template v-if="item.href">
+          <BreadcrumbLink
+            as-child
+            class="max-w-20 truncate md:max-w-none"
+          >
+            <NuxtLink :to="item.href">
+              {{ item.label }}
+            </NuxtLink>
+          </BreadcrumbLink>
+          <BreadcrumbSeparator />
+        </template>
+        <template v-else>
+          <BreadcrumbPage class="max-w-20 truncate md:max-w-none">
+            {{ item.label }}
+          </BreadcrumbPage>
+        </template>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/apps/v4/content/docs/components/breadcrumb.md b/apps/v4/content/docs/components/breadcrumb.md
index 935d0ef87..a50df3fcf 100644
--- a/apps/v4/content/docs/components/breadcrumb.md
+++ b/apps/v4/content/docs/components/breadcrumb.md
@@ -82,3 +82,152 @@ import {
   </Breadcrumb>
 </template>
 ```
+
+## Examples
+
+### Custom separator
+
+Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
+
+::component-preview
+---
+name: BreadcrumbCustomSeparatorDemo
+---
+::
+
+```vue showLineNumbers {2,12-14}
+<script setup lang="ts">
+import { SlashIcon } from "lucide-vue-next"
+//...
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+<template>
+```
+
+----
+
+### Dropdown
+You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
+
+::component-preview
+---
+name: BreadcrumbDropdownDemo
+---
+::
+
+```vue showLineNumbers {2-7,13-22}
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+//...
+</script>
+
+<template>
+  <BreadcrumbItem>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        Components
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem>Documentation</DropdownMenuItem>
+        <DropdownMenuItem>Themes</DropdownMenuItem>
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </BreadcrumbItem>
+</template>
+```
+
+----
+
+### Collapsed
+
+We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
+
+::component-preview
+---
+name: BreadcrumbCollapsedDemo
+---
+::
+
+```vue showLineNumbers {2,11}
+<script setup lang="ts">
+import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
+//...
+</script>
+
+<template>
+<Breadcrumb>
+  <BreadcrumbList>
+    <!-- ... -->
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <!-- ... -->
+  </BreadcrumbList>
+</Breadcrumb>
+</template>
+```
+
+----
+
+### Link component
+To use a custom link component from your routing library, you can use the `as-child` prop on `<BreadcrumbLink />`.
+
+::component-preview
+---
+name: BreadcrumbLinkDemo
+---
+::
+
+```vue showLineNumbers {2,10-12}
+<script setup lang="ts">
+import { NuxtLink } from "#components"
+//...
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink as-child>
+          <NuxtLink to="/">Home</NuxtLink>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      {/* ... */}
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
+```
+
+----
+
+### Responsive
+Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, ` <DropdownMenu />`, and `<Drawer />`.
+
+It displays a dropdown on desktop and a drawer on mobile.
+
+::component-preview
+---
+name: BreadcrumbResponsiveDemo
+---
+::
+