70 lines
1.2 KiB
Svelte
70 lines
1.2 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
|
|
export let crumbs = []
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
function navigateTo(index) {
|
|
dispatch('navigate', index)
|
|
}
|
|
</script>
|
|
|
|
<nav class="breadcrumbs">
|
|
{#each crumbs as crumb, i}
|
|
{#if i > 0}
|
|
<span class="sep">/</span>
|
|
{/if}
|
|
{#if i === crumbs.length - 1}
|
|
<span class="crumb crumb--current">{crumb.name}</span>
|
|
{:else}
|
|
<button class="crumb crumb--link" on:click={() => navigateTo(i)}>{crumb.name}</button>
|
|
{/if}
|
|
{/each}
|
|
</nav>
|
|
|
|
<style>
|
|
.breadcrumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
.sep {
|
|
color: #444;
|
|
}
|
|
|
|
.crumb {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.crumb--current {
|
|
color: #ccc;
|
|
}
|
|
|
|
.crumb--link {
|
|
background: none;
|
|
border: none;
|
|
padding: 2px 4px;
|
|
color: #888;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
transition: color 0.12s, background 0.12s;
|
|
}
|
|
|
|
.crumb--link:hover {
|
|
color: #ccc;
|
|
background: #1e1e30;
|
|
}
|
|
|
|
.crumb--link:focus-visible {
|
|
outline: 2px solid #5588ff;
|
|
outline-offset: 1px;
|
|
}
|
|
</style>
|