useBreadcrumbs

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

ExampleCopy Anchor Link

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

APICopy Anchor Link

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

It returns a list of { name: string; url: string } items. See 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.

GotchasCopy Anchor Link

• 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 component for client-side navigation.

NextCopy Anchor Link

• Shared types: Breadcrumb and Page.
• Routes and pages explains the page object.
• Link