Skip to content

Instantly share code, notes, and snippets.

@danangponorogo
Last active January 19, 2021 09:07
Show Gist options
  • Save danangponorogo/ddd0cd552d80aa76479a026a00996f5d to your computer and use it in GitHub Desktop.
Save danangponorogo/ddd0cd552d80aa76479a026a00996f5d to your computer and use it in GitHub Desktop.
Simple Breadcrumbs Component for Svelte (using routify)
<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>
<script>
import Breadcrumbs from "./Breadcrumbs.svelte";
let items = [
{ href: "/", text: "Dashboard" },
{ href: "/reports", text: "Annual reports" },
{ href: "/reports/2019", text: "2019" },
];
</script>
<Breadcrumbs {items} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment