Breadcrumb
The navigation component at the top of the screen
A hook for implementing Breadcrumb in your documentation. It returns breadcrumb items for a page based on the given page tree.
If present, the index page of a folder will be used as the item.
Usage
It exports a useBreadcrumb hook:
import { } from 'fumadocs-core/breadcrumb';
// obtain `pathname` using the hook provided by your React framework.
const = ();
const items = (, );Example
A styled example for Next.js.
'use client';
import { usePathname } from 'next/navigation';
import { useBreadcrumb } from 'fumadocs-core/breadcrumb';
import type { PageTree } from 'fumadocs-core/page-tree';
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 prop in a server component.
Breadcrumb Item
Prop
Type
How is this guide?