diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index 4969031..a869fb2 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -358,17 +358,6 @@
   margin-top: var(--su-space-4);
 }
 
-.group-crumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--su-space-2);
-  padding: var(--su-space-2) var(--su-space-3);
-}
-
-.group-crumb-sep {
-  color: var(--su-text-muted);
-}
-
 .group-child-block {
   margin-top: var(--su-space-2);
 }
diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx
index 7524913..cd5008d 100644
--- a/stash-web/src/AppNext.tsx
+++ b/stash-web/src/AppNext.tsx
@@ -1,4 +1,5 @@
 import {
+  Breadcrumb,
   Empty,
   EngineIcon,
   Layout,
@@ -606,23 +607,17 @@ export default function AppNext() {
 
     return (
       <div className="detail-view">
-        <nav className="detail-breadcrumb group-crumbs">
-          <button type="button" className="link-button" onClick={() => navigate('/')}>
-            首页
-          </button>
-          {trail.map((node) => (
-            <span key={node.key}>
-              <span className="group-crumb-sep">/</span>
-              <button
-                type="button"
-                className="link-button"
-                onClick={() => navigate(`/g/${encodeURIComponent(node.key)}`)}
-              >
-                {node.title}
-              </button>
-            </span>
-          ))}
-        </nav>
+        <Breadcrumb
+          className="detail-breadcrumb"
+          items={[
+            { label: '首页', href: '/' },
+            ...trail.map((node) => ({
+              label: node.title,
+              href: `/g/${encodeURIComponent(node.key)}`,
+            })),
+          ]}
+          onNavigate={navigate}
+        />
 
         <div className="detail-hero">
           <span className="detail-hero-icon" aria-hidden="true">