diff --git a/.changeset/lovely-seals-say.md b/.changeset/lovely-seals-say.md
new file mode 100644
index 0000000000..26097a4a3f
--- /dev/null
+++ b/.changeset/lovely-seals-say.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Truncate Pageheader breadcrumb items when they are too long
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/default/focused.png
index aa106c7d10..995422e1f2 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/page_header/default/focused.png differ
diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 2dc25569c3..d314e0b3e4 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -23,6 +23,7 @@ class PageHeader < Primer::Component
       DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
+      BREADCRUMB_TRUNCATE_AT = 200
 
       STATE_DEFAULT = :show
       STATE_EDIT = :edit
@@ -222,9 +223,17 @@ class PageHeader < Primer::Component
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             if item.is_a?(String)
-              breadcrumbs.with_item(href: "#", font_weight: selected_item_font_weight) { item }
+              breadcrumbs.with_item(href: "#", font_weight: selected_item_font_weight) do
+                render(Primer::Beta::Truncate.new) do |truncate|
+                  truncate.with_item(max_width: BREADCRUMB_TRUNCATE_AT) { item }
+                end
+              end
             else
-              breadcrumbs.with_item(href: item[:href], target: "_top") { item[:text] }
+              breadcrumbs.with_item(href: item[:href], target: "_top") do
+                render(Primer::Beta::Truncate.new) do |truncate|
+                  truncate.with_item(max_width: BREADCRUMB_TRUNCATE_AT) { item[:text] }
+                end
+              end
             end
           end
         end
diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 6eff39986d..429dbae7fb 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -191,6 +191,19 @@ def non_bold_breadcrumbs
         end
       end
 
+      # @label With truncated breadcrumbs
+      # Long breadcrumb elements are truncated after 200px
+      def truncated_breadcrumbs
+        breadcrumb_items = [{ href: "/foo", text: "OpenProject" },
+                            { href: "/bar", text: "Stream Dream team" },
+                            { href: "/baz", text: "A very long sub project that will be truncated" },
+                            "Hello"]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "A title" }
+          header.with_breadcrumbs(breadcrumb_items, selected_item_font_weight: :normal)
+        end
+      end
+
       # @label Without breadcrumbs
       # A PageHeader example that renders without breadcrumbs.
       # This should only be done for *entry pages* (such as overview pages).
diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
index e20379cec7..e96517e71f 100644
--- a/test/components/primer/open_project/page_header_test.rb
+++ b/test/components/primer/open_project/page_header_test.rb
@@ -215,6 +215,26 @@ def test_renders_non_bold_breadcrumbs
     assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item:not(.text-bold) a[href='#']")
   end
 
+  def test_renders_truncated_breadcrumb
+    breadcrumb_items = [{ href: "/foo", text: "OpenProject" },
+                        { href: "/bar", text: "Stream Dream team" },
+                        { href: "/baz", text: "A very long sub project that will be truncated" },
+                        "Hello"]
+
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_breadcrumbs(breadcrumb_items)
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-breadcrumbs")
+    assert_selector(".PageHeader-parentLink")
+
+    assert_selector(".breadcrumb-item a[href='/baz'] .Truncate > .Truncate-text[style='max-width: 200px;']",
+                    text: "A very long sub project that will be truncated")
+  end
+
   def test_renders_tab_nav
     render_inline(Primer::OpenProject::PageHeader.new) do |header|
       header.with_title { "Hello" }