docs(breadcrumb): update

docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Home',
+  to: '/'
+}, {
+  slot: 'dropdown' as const,
+  icon: 'i-heroicons-ellipsis-horizontal',
+  children: [{
+    label: 'Documentation'
+  }, {
+    label: 'Themes'
+  }, {
+    label: 'GitHub'
+  }]
+}, {
+  label: 'Components',
+  to: '/components'
+}, {
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #dropdown="{ item }">
+      <UDropdownMenu :items="item.children">
+        <UButton :icon="item.icon" color="gray" variant="link" class="p-0.5" />
+      </UDropdownMenu>
+    </template>
+  </UBreadcrumb>
+</template>

docs/app/components/content/examples/breadcrumb/BreadcrumbExample.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Home',
+  icon: 'i-heroicons-home'
+}, {
+  icon: 'i-heroicons-cube-transparent',
+  label: 'Components',
+  to: '/components'
+}, {
+  icon: 'i-heroicons-link',
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items" />
+</template>

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorExample.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Home',
+  to: '/'
+}, {
+  label: 'Components',
+  to: '/components'
+}, {
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items" separator-icon="i-mdi-slash-forward" />
+</template>

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Home',
+  to: '/'
+}, {
+  label: 'Components',
+  to: '/components'
+}, {
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :items="items">
+    <template #separator>
+      <span class="mx-2 text-gray-500 dark:text-gray-400">/</span>
+    </template>
+  </UBreadcrumb>
+</template>