Breadcrumbs

Implementation
Breadcrumbs Props
Breadcrumbs.Link Props

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

<Breadcrumbs>
  <Breadcrumbs.Link href="/home">Home</Breadcrumbs.Link>
  <Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
</Breadcrumbs>

`Breadcrumbs` Props

The Breadcrumbs component can accept any valid HTML nav props.

<Breadcrumbs.Link href="/home">Home</Breadcrumbs.Link>

`Breadcrumbs.Link` Props

The Breadcrumbs.Link component can accept any valid HTML a props.

Anvil2 Web

Resources

Breadcrumbs – Code

Common Examples

​Common Examples

​Building breadcrumbs from data

​Breadcrumbs Props

​Breadcrumbs.Link Props

Common Examples

Building breadcrumbs from data

`Breadcrumbs` Props

`Breadcrumbs.Link` Props