Routify Breadcrumbs

routify-breadcrumds.md

Scenario

Let's say I have something like this:

src/pages/foo/index.svelte

• a page listing some foos

<div>Foo</div>

<ul>
  <li><a href="/foo/1">Foo-1</a></li>
  <li><a href="/foo/2">Foo-2</a></li>
  <li><a href="/foo/3">Foo-3</a></li>
</ul>

src/pages/foo/[fooId]/index.svelte

• a page showing details for a specific foo
• fetches data about foo from some api

<script>
  export let fooId;
  
  let fooData = fetch(`/some-url/${fooId}`)
                    .then(res => res.json())
                    .then(data => fooName = data.name);
  
  let fooName = null;
</script>

<div>Foo {fooName || '...'}</div>

Question

Now, I want to generate breadcrumb navigation in a base layout.

I'd like to be able to customize the labels in the breadcrumd, so that it reads:

Home / List of Foos / Foo ${name}

(where ${name} is the name of the foo, as returned by the API call)

• I know I can get the lineage of routes (or pages), from routify.
• I could possibly use metadata for the static string "List of Foos"

But, how can I get (or somehow propagate) the value of a component property to a breadcrumb component?