Web Components

The snippet registers two custom elements after window.Riftix is installed. They provide a declarative alternative to calling Riftix.navigation.setBreadcrumbs() directly.

<riftix-page>

Wraps the root of your product page. Observes its direct <riftix-breadcrumb> children and keeps the host breadcrumb trail in sync automatically.

<riftix-page>
  <!-- breadcrumbs go here -->
</riftix-page>

• display: contents — invisible in the layout, acts as a transparent container.
• On connectedCallback: emits current breadcrumbs immediately.
• On disconnectedCallback: clears the host breadcrumb trail (crumbs: []).
• Uses a MutationObserver on direct children (childList, not subtree). Changes to the children trigger a re-emit.

<riftix-breadcrumb>

Represents a single breadcrumb item. Must be a direct child of <riftix-page>.

<riftix-page>
  <riftix-breadcrumb href="/billing">Billing</riftix-breadcrumb>
  <riftix-breadcrumb>Invoices</riftix-breadcrumb>
</riftix-page>

• Label is read from textContent.trim(). Empty labels are skipped.
• attributeChangedCallback on href re-emits to <riftix-page>.
• Installs a MutationObserver on its own subtree (text / children) so inline text changes trigger a re-emit.

Coalescing

Rapid DOM changes (e.g. multiple href updates in one tick) are coalesced via queueMicrotask. Only one setBreadcrumbs RPC is sent per microtask checkpoint.

React usage

Install snippet types for JSX support:

pnpm add -D @riftix/console-bridge-snippet-types

Then:

import "@riftix/console-bridge-snippet-types";

export function SectionBreadcrumbs({ section }: { section: string }) {
  if (section === "overview") {
    return (
      <riftix-page>
        <riftix-breadcrumb>Billing</riftix-breadcrumb>
      </riftix-page>
    );
  }

  if (section === "invoices") {
    return (
      <riftix-page>
        <riftix-breadcrumb href="#overview">Billing</riftix-breadcrumb>
        <riftix-breadcrumb>Invoices</riftix-breadcrumb>
      </riftix-page>
    );
  }

  return (
    <riftix-page>
      <riftix-breadcrumb href="#overview">Billing</riftix-breadcrumb>
      <riftix-breadcrumb href="#invoices">Invoices</riftix-breadcrumb>
      <riftix-breadcrumb>Invoice #1234</riftix-breadcrumb>
    </riftix-page>
  );
}

When section changes, React removes and re-creates the <riftix-page> element (or updates its children). The MutationObserver inside <riftix-page> detects the change and re-emits automatically.

Imperative alternative

If you prefer programmatic control:

await window.Riftix!.ready;

// Set crumbs
await window.Riftix!.navigation.setBreadcrumbs({
  crumbs: [
    { label: "Billing", href: "#overview" },
    { label: "Invoices" },
  ],
});

// Clear crumbs
await window.Riftix!.navigation.setBreadcrumbs({ crumbs: [] });