面包屑

一个用于在文档中实现面包屑的钩子。它根据给定的页面树返回页面的面包屑项。

🌐 A hook for implementing Breadcrumb in your documentation. It returns breadcrumb items for a page based on the given page tree.

如果存在，文件夹的索引页面将被用作该项。

使用

🌐 Usage

它导出一个 useBreadcrumb 钩子：

🌐 It exports a useBreadcrumb hook:

import {  } from 'fumadocs-core/breadcrumb';

// obtain `pathname` using the hook provided by your React framework.
const  = ();
const items = (, );      
const items: BreadcrumbItem[]

例子

🌐 Example

Next.js 的一个风格化示例。

🌐 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>
  );
}

你可以通过在服务器组件中使用 tree 属性传递页面树来使用它。

🌐 You can use it by passing the page tree via tree prop in a server component.

🌐 Breadcrumb Item

Prop

Type

使用

例子

面包屑项

On this page