Breadcrumb

import { Breadcrumb } from "@grassroot/ui-react";
 
<Breadcrumb
  items={[
    { label: "projects", href: "#" },
    { label: "ledger-api", href: "#" },
    { label: "migration" },
  ]}
/>

<script setup lang="ts">
import { Breadcrumb } from "@grassroot/ui-vue";
</script>
 
<template>
  <Breadcrumb
    :items="[
      { label: 'projects', href: '#' },
      { label: 'ledger-api', href: '#' },
      { label: 'migration' },
    ]"
  />
</template>

import { Component } from "@angular/core";
import { GrassrootBreadcrumb } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootBreadcrumb],
  template: `
    <grassroot-breadcrumb
      [items]="[
        { label: 'projects', href: '#' },
        { label: 'ledger-api', href: '#' },
        { label: 'migration' },
      ]"
    />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Breadcrumb } from "@grassroot/ui-svelte";
</script>
 
<Breadcrumb
  items={[
    { label: "projects", href: "#" },
    { label: "ledger-api", href: "#" },
    { label: "migration" },
  ]}
/>

import { Breadcrumb } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Breadcrumb
        items={[
          { label: "projects", href: "#" },
          { label: "ledger-api", href: "#" },
          { label: "migration" },
        ]}
      />
    </>
  );
}