Skip to main content

​
Common Examples

import { Breadcrumbs } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="https://some.url">Home</Breadcrumbs.Link>
      <Breadcrumbs.Link href="https://some.url/page">Page</Breadcrumbs.Link>
    </Breadcrumbs>
  );
}

​
Building breadcrumbs from data

Breadcrumbs are slim wrappers around an HTML nav element with some a links and a span for the current page.To create dynamic breadcrumbs on a page, collect the page names and URLs in an array and map it to Breadcrumbs.Link components.Note: the final breadcrumb will be treated as the current page, and will render as plain text instead of a link.
const sampleData = [
  {
    name: "Home",
    url: "https://some.url/",
  },
  {
    name: "Reports",
    url: "https://some.url/reports",
  },
  {
    name: "Weekly Report",
    // this url will be ignored as the current page
    url: "https://some.url/reports/weekly-report",
  },
];

export const SampleComponent = () => {
  return (
    <Breadcrumbs>
      {sampleData.map((link) => (
        <Breadcrumbs.Link href={link.url} key={link.url}>
          {link.name}
        </Breadcrumbs.Link>
      ))}
    </Breadcrumbs>
  );
};
Last modified on January 23, 2026