docs(breadcrumb): update

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

@@ -1,18 +0,0 @@
-<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

@@ -12,5 +12,9 @@ const items = [{
 </script>
 
 <template>
-  <UBreadcrumb :items="items" separator-icon="i-heroicons-arrow-right-20-solid" />
+  <UBreadcrumb :items="items">
+    <template #separator>
+      <span class="mx-2 text-gray-500 dark:text-gray-400">/</span>
+    </template>
+  </UBreadcrumb>
 </template>

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

@@ -1,20 +0,0 @@
-<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

@@ -17,7 +17,22 @@ Use the `items` prop as an array of objects with the following properties:
 
 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"}
+::component-code
+---
+external:
+  - items
+props:
+  items:
+    - label: 'Home'
+      icon: 'i-heroicons-home'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      to: '/components'
+    - label: 'Breadcrumb'
+      icon: 'i-heroicons-link'
+      to: '/components/breadcrumb'
+---
+::
 
 ::tip
 A `span` will be rendered instead of a link when the `to` property is not defined.
@@ -27,7 +42,23 @@ A `span` will be rendered instead of a link when the `to` property is not define
 
 Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-heroicons-chevron-right-20-solid`.
 
-:component-example{name="breadcrumb-separator-example"}
+::component-code
+---
+external:
+  - items
+props:
+  separatorIcon: 'i-heroicons-arrow-right-20-solid'
+  items:
+    - label: 'Home'
+      icon: 'i-heroicons-home'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      to: '/components'
+    - label: 'Breadcrumb'
+      icon: 'i-heroicons-link'
+      to: '/components/breadcrumb'
+---
+::
 
 ::tip
 You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
@@ -45,7 +76,7 @@ Use the `slot` property to customize a specific item with a dropdown menu for ex
 
 Use the `#separator` slot to customize the separator between each item.
 
-:component-example{name="breadcrumb-separator-slot-example"}
+:component-example{name="breadcrumb-separator-example"}
 
 ## API
 

docs/nuxt.config.ts

@@ -121,6 +121,7 @@ export default defineNuxtConfig({
         'UAvatar',
         'UAvatarGroup',
         'UBadge',
+        'UBreadcrumb',
         'UButton',
         'UButtonGroup',
         'UIcon',