December 23, 2024
In this update the Breadcrumbs component got a little update. You can now pass a slot in the array of items & customize what is displayed in that slot.
<template>
<UiBreadcrumbs :items="items" class="justify-center">
<template #select>
<UiSelect default-value="s1">
<UiSelectTrigger class="h-9 w-36" />
<UiSelectContent>
<UiSelectItem value="s1">Orion</UiSelectItem>
<UiSelectItem value="s2">Sigma</UiSelectItem>
<UiSelectItem value="s3">Dorado</UiSelectItem>
</UiSelectContent>
</UiSelect>
</template>
</UiBreadcrumbs>
</template>
<script lang="ts" setup>
import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";
const items: BreadcrumbItem[] = [{ label: "Databases" }, { slot: "select" }];
</script>
You can try it out by running
npx ui-thing@latest add breadcrumbs