Skip to content

Instantly share code, notes, and snippets.

@ragnard
Last active March 4, 2021 12:08
Show Gist options
  • Save ragnard/76dc1be9e027be0b195138374001abfd to your computer and use it in GitHub Desktop.
Save ragnard/76dc1be9e027be0b195138374001abfd to your computer and use it in GitHub Desktop.
Routify Breadcrumbs

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment