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>

docs/content/3.components/breadcrumb.md

@@ -8,8 +8,45 @@ links:
 
 ## Usage
 
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+
+You can also pass any property from [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `target`, etc.
+
+:component-example{name="breadcrumb-example"}
+
+::tip
+A `span` will be rendered instead of a link when the `to` property is not defined.
+::
+
+### Separator
+
+Use the `separatorIcon` prop to customize the icon between each item. Defaults to `i-heroicons-chevron-right-20-solid`.
+
+:component-example{name="breadcrumb-separator-example"}
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
+::
+
 ## Examples
 
+### With separator slot
+
+Use the `#separator` slot to customize the separator between each item.
+
+:component-example{name="breadcrumb-separator-slot-example"}
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+:component-example{name="breadcrumb-custom-slot-example"}
+
 ## API
 
 ### Props