Breadcrumb

const breadcrumbFixture = {
  id: "breadcrumb",
  separator: "/",
  items: [
    { label: "projects", href: "/projects" },
    { label: "ledger-api", href: "/projects/ledger-api" },
    { label: "deployments" },
  ],
} satisfies { id: string; separator: string; items: Array<{ label: string; href?: string }> };
 
import { Breadcrumb } from "@grassroot/ui-react";
 
export default function BreadcrumbDemo() {
  return (
    <div>
      <Breadcrumb items={breadcrumbFixture.items} separator={breadcrumbFixture.separator} />
    </div>
  );
}

<script setup lang="ts">
import { Breadcrumb } from "@grassroot/ui-vue";
const breadcrumbFixture = {
  id: "breadcrumb",
  separator: "/",
  items: [
    { label: "projects", href: "/projects" },
    { label: "ledger-api", href: "/projects/ledger-api" },
    { label: "deployments" },
  ],
} satisfies { id: string; separator: string; items: Array<{ label: string; href?: string }> };
 
</script>
 
<template>
  <div>
    <Breadcrumb :items="breadcrumbFixture.items" :separator="breadcrumbFixture.separator" />
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootBreadcrumb } from "@grassroot/ui-angular";
const breadcrumbFixture = {
  id: "breadcrumb",
  separator: "/",
  items: [
    { label: "projects", href: "/projects" },
    { label: "ledger-api", href: "/projects/ledger-api" },
    { label: "deployments" },
  ],
} satisfies { id: string; separator: string; items: Array<{ label: string; href?: string }> };
 
@Component({
  selector: "app-breadcrumb-demo",
  standalone: true,
  imports: [GrassrootBreadcrumb],
  template: `
    <div>
      <grassroot-breadcrumb [items]="fixture.items" [separator]="fixture.separator" />
    </div>
  `,
})
export class BreadcrumbDemoComponent {
  protected readonly fixture = breadcrumbFixture;
}
 
export default BreadcrumbDemoComponent;

<script lang="ts">
  import { Breadcrumb } from "@grassroot/ui-svelte";
  const breadcrumbFixture = {
    id: "breadcrumb",
    separator: "/",
    items: [
      { label: "projects", href: "/projects" },
      { label: "ledger-api", href: "/projects/ledger-api" },
      { label: "deployments" },
    ],
  } satisfies { id: string; separator: string; items: Array<{ label: string; href?: string }> };
 
  </script>
 
<div>
  <Breadcrumb items={breadcrumbFixture.items} separator={breadcrumbFixture.separator} />
</div>

/** @jsxImportSource solid-js */
import { Breadcrumb } from "@grassroot/ui-solid";
const breadcrumbFixture = {
  id: "breadcrumb",
  separator: "/",
  items: [
    { label: "projects", href: "/projects" },
    { label: "ledger-api", href: "/projects/ledger-api" },
    { label: "deployments" },
  ],
} satisfies { id: string; separator: string; items: Array<{ label: string; href?: string }> };
 
import type { JSX } from "solid-js";
 
export default function BreadcrumbDemo(): JSX.Element {
  return (
    <div>
      <Breadcrumb items={breadcrumbFixture.items} separator={breadcrumbFixture.separator} />
    </div>
  );
}