Simple Breadcrumbs Component for Svelte (using routify)

Breadcrumbs.svelte

<script>
  import { url } from "@roxi/routify";
  export const items = [
    { href: "/", text: "Dashboard" },
    { href: "/reports", text: "Annual reports" },
    { href: "/reports/2019", text: "2019" },
  ];
</script>

<ul class="breadcrumb">
    {#each items as item, i}
        <li>
            {#if i === items.length - 1}
                {item.text}
            {:else}
                <a href={$url(item.href)}>{item.text}</a>
            {/if}
        </li>
    {/each}
</ul>

<style>
    /* Style the list */
    ul.breadcrumb {
        padding: 10px 16px;
        list-style: none;
        background-color: #eee;
    }

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 18px;
    }

    /* Add a slash symbol (/) before/behind each list item */
    ul.breadcrumb li + li:before {
        padding: 8px;
        color: black;
        content: "/\00a0";
    }

    /* Add a color to all links inside the list */
    ul.breadcrumb li a {
        color: #0275d8;
        text-decoration: none;
    }

    /* Add a color on mouse-over */
    ul.breadcrumb li a:hover {
        color: #01447e;
        text-decoration: underline;
    }
</style>

index.svelte

<script>
  import Breadcrumbs from "./Breadcrumbs.svelte";

  let items = [
      { href: "/", text: "Dashboard" },
      { href: "/reports", text: "Annual reports" },
      { href: "/reports/2019", text: "2019" },
  ];
</script>

<Breadcrumbs {items} />