Files
ui/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
Haytham A. Salama a35bfc7343 feat(Breadcrumb): new component (#506)
Co-authored-by: Eduard Aymerich <eduardaymerich@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2023-11-16 18:06:51 +01:00

26 lines
637 B
Vue

<script setup>
const links = [{
label: 'Home',
to: '/'
}, {
label: 'Navigation'
}, {
label: 'Breadcrumb'
}]
</script>
<template>
<UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
<template #icon="{ link, index, isActive }">
<UAvatar
:alt="(index + 1 ).toString()"
:ui="{
background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
}"
size="xs"
/>
</template>
</UBreadcrumb>
</template>