docs(breadcrumb): update

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