From 727b0211b297171033832ca582a462b5e7663b25 Mon Sep 17 00:00:00 2001
From: Fuma Nama <god63820869@gmail.com>
Date: Tue, 7 Jan 2025 05:13:26 +0800
Subject: [PATCH] Docs: add example for headless components

---
 .../docs/headless/components/breadcrumb.mdx   | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/docs/headless/components/breadcrumb.mdx b/apps/docs/content/docs/headless/components/breadcrumb.mdx
index 7e0752ea4..e846de2e8 100644
--- a/apps/docs/content/docs/headless/components/breadcrumb.mdx
+++ b/apps/docs/content/docs/headless/components/breadcrumb.mdx
@@ -13,9 +13,6 @@ a page based on the given page tree.
 it exports a `useBreadcrumb` hook:
 
 ```ts twoslash
-/**
- * @author hel
- */
 declare const tree: any;
 // ---cut---
 import { usePathname } from 'next/navigation';
@@ -26,6 +23,51 @@ const items = useBreadcrumb(pathname, tree);
 //    ^?
 ```
 
+### Example
+
+A styled example.
+
+```tsx
+'use client';
+import { usePathname } from 'next/navigation';
+import { useBreadcrumb } from 'fumadocs-core/breadcrumb';
+import type { PageTree } from 'fumadocs-core/server';
+import { Fragment } from 'react';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+export function Breadcrumb({ tree }: { tree: PageTree.Root }) {
+  const pathname = usePathname();
+  const items = useBreadcrumb(pathname, tree);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground">
+      {items.map((item, i) => (
+        <Fragment key={i}>
+          {i !== 0 && (
+            <ChevronRight className="size-4 shrink-0 rtl:rotate-180" />
+          )}
+          {item.url ? (
+            <Link
+              href={item.url}
+              className="truncate hover:text-fd-accent-foreground"
+            >
+              {item.name}
+            </Link>
+          ) : (
+            <span className="truncate">{item.name}</span>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+```
+
+You can use it by passing the page tree via `tree` in a server component.
+
 ### Breadcrumb Item
 
 <AutoTypeTable path="./content/docs/headless/props.ts" name="BreadcrumbItem" />