# All files / js/components Breadcrumbs.vue

0% Statements 0/7
0% Branches 0/6
0% Functions 0/7
0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43

     <script setup lang="ts">
    import {
        Breadcrumb,
        BreadcrumbItem,
        BreadcrumbLink,
        BreadcrumbList,
        BreadcrumbPage,
        BreadcrumbSeparator,
    } from '@/components/ui/breadcrumb';
    import { Link } from '@inertiajs/vue3';

    interface BreadcrumbItemType {
        title: string;
        href?: string;
    }

    defineProps<{
        breadcrumbs: BreadcrumbItemType[];
    }>();
    </script>

    <template>
        <Breadcrumb>
            <BreadcrumbList>
                <template v-for="(item, index) in breadcrumbs" :key="index">
                    <BreadcrumbItem>
                        <template v-if="index === breadcrumbs.length - 1">
                            <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
                        </template>
                        <template v-else>
                            <BreadcrumbLink as-child>
                                <Link :href="item.href ?? '#'">{{
                                    item.title
                                }}</Link>
                            </BreadcrumbLink>
                        </template>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
                </template>
            </BreadcrumbList>
        </Breadcrumb>
    </template>