AzuraCast/frontend/vue/components/Stations/Media/Breadcrumb.vue

<template>
    <h3 class="card-subtitle mt-0 mb-2" id="breadcrumb">
        <a href="#" @click.prevent="changeDirectory('')">{{ $gettext('Home') }}</a>
        <template v-for="part in directoryParts">
            &blacktriangleright;
            <a href="#" @click.prevent="changeDirectory(part.dir)">{{ part.display }}</a>
        </template>
    </h3>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
    currentDirectory: String
});

const emit = defineEmits(['change-directory']);

const directoryParts = computed(() => {
    let dirParts = [];

    if (props.currentDirectory === '') {
        return dirParts;
    }

    let builtDir = '';
    let dirSegments = props.currentDirectory.split('/');

    dirSegments.forEach((part) => {
        if (builtDir === '') {
            builtDir += part;
        } else {
            builtDir += '/' + part;
        }

        dirParts.push({dir: builtDir, display: part});
    });

    return dirParts;
});

const changeDirectory = (newDir) => {
    emit('change-directory', newDir);
}
</script>