# useBreadcrumbs (https://docs.salla.dev/twilight/react/hooks/use-breadcrumbs)



Use `useBreadcrumbs` to render the trail ("Home / Accessories / Watch") above a page.

## Example [#example]

```tsx title="app/components/layout/Breadcrumbs.tsx"
import { useBreadcrumbs } from '@salla.sa/twilight-theme-engine/hooks';
import type { Page } from '@salla.sa/twilight-theme-engine/types';

export function Breadcrumbs({ page }: { page: Page }) {
  const crumbs = useBreadcrumbs(page);
  if (!crumbs.length) return null;

  return (
    <nav aria-label="Breadcrumb">
      {crumbs.map((c, i) =>
        i === crumbs.length - 1 ? (
          <span key={c.url}>{c.name}</span>
        ) : (
          <a key={c.url} href={c.url}>{c.name} /</a>
        )
      )}
    </nav>
  );
}
```

## API [#api]

```ts
function useBreadcrumbs(page?: Page | null): Breadcrumb[];
```

| Prop   | Type                      | Description                                                                     |
| ------ | ------------------------- | ------------------------------------------------------------------------------- |
| `page` | `Page \| null` (optional) | The `page` object your route loader returned. Without it the hook returns `[]`. |

It returns a list of `{ name: string; url: string }` items. See [Shared types](https://docs.salla.dev/twilight/react/data/shared-types) for `Breadcrumb` and `Page`.

Where the trail comes from, in order:

1. `page.breadcrumbs`, when the route loader provides them. They are returned as they are.
2. On the home page, an empty list.
3. Otherwise a fallback: `Home` (translated, linking to `/`) followed by the page title linking to the current path.

## Gotchas [#gotchas]

* Import it from `@salla.sa/twilight-theme-engine/hooks`, the package root of the hooks. It has no subpath of its own.
* The returned list is empty on the home page and when `page` is missing. Render nothing in that case.
* On a product page the hook inserts the listing the customer came from (a category, a search, the brands page) between the first crumb and the product. It remembers that listing in the browser's session storage, so the inserted crumb appears after hydration, not in server-rendered HTML.
* The referrer is saved for every page except the home page and product pages, and only lasts for the browser session.
* Crumb `url` values from the loader are paths. Render them with your [`Link`](https://docs.salla.dev/twilight/react/components/link) component for client-side navigation.

## Next [#next]

* [Shared types](https://docs.salla.dev/twilight/react/data/shared-types): `Breadcrumb` and `Page`.
* [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages) explains the `page` object.
* [`Link`](https://docs.salla.dev/twilight/react/components/link)