---
title: Breadcrumb
description: The navigation component at the top of screen
---

A hook for implementing Breadcrumb in your documentation, it returns the path to
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:

```ts twoslash
/**
 * @author hel
 */
declare const tree: any;
// ---cut---
import { usePathname } from 'next/navigation';
import { useBreadcrumb } from 'fumadocs-core/breadcrumb';

const pathname = usePathname();
const items = useBreadcrumb(pathname, tree);
//    ^?
```

### Breadcrumb Item

<AutoTypeTable path="./content/docs/headless/props.ts" name="BreadcrumbItem" />
