doc: document breadcrumb overrides

README.md

@@ -17,7 +17,7 @@ The complete SEO solution for Nuxt.
 <tbody>
 <td align="center">
 <img width="800" height="0" /><br>
-<i>Status:</i> <a href="https://github.com/harlan-zw/nuxt-seo/releases/tag/v2.0.0">v2 Released</a></b> <br>
+<i>Status:</i> <a href="https://github.com/harlan-zw/nuxt-seo/releases/tag/v2.0.0">v2 RC is available</a></b> <br>
 <sup> Please report any issues 🐛</sup><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
 <img width="800" height="0" />

docs/content/0.nuxt-seo/3.api/4.breadcrumbs.md

@@ -18,6 +18,108 @@ The `useBreadcrumbItems()` composable is a way to generate an automatic breadcru
 
 ::
 
+## Modifying Breadcrumbs
+
+Because the breadcrumb is generated automatically, you may need to modify the final output.
+
+It's important to do this within the `defineBreadcrumbItems` function, as it will ensure that the Schema.org is generated correctly.
+
+### Route Meta
+
+If you need to modify the breadcrumb for a specific static route, you can use the `breadcrumb` property of the route meta.
+
+```vue [Page Meta]
+<script lang="ts" setup>
+definePageMeta({
+  breadcrumb: {
+    icon: 'i-heroicons-home',
+    ariaLabel: 'Home'
+  },
+})
+</script>
+```
+
+### Overrides
+
+When you need more control over the final output, you can use the `overrides` prop. This allows
+you to override any part of the breadcrumb.
+
+The property takes an array of either: `BreadcrumbItem`, `false` or `undefined`, the array
+of overrides is applied in the order they are provided.
+
+When providing `undefined`, nothing will be overridden. When providing `false`, the breadcrumb
+will be removed.
+
+For example, if you have the path `/blog/my-post` and you want to override the `my-post` segment, we need
+to target the third item in the array.
+
+```ts
+// path: /blog/my-post will generate ['Home', 'Blog', 'My Post']
+useBreadcrumbItems({
+  overrides: [
+    undefined, // Home
+    undefined, // Blog
+    {
+      label: 'My Awesome Post',
+      to: '/blog/my-post',
+      icon: 'i-heroicons-home'
+    }
+  ]
+})
+```
+
+### `append` and `prepend`
+
+If you need to add items to the end or beginning of the breadcrumb, you can use the `append` and `prepend` props.
+
+```ts
+useBreadcrumbItems({
+  append: [
+    {
+      label: 'Final Link'
+    }
+  ]
+})
+```
+
+
+### I18n Integration
+
+If you're using the [@nuxtjs/i18n](https://i18n.nuxtjs.org/) module, you can use the key `breadcrumbs.items.${routeName}`.
+
+Where `routeName` is the generated name of the Vue Router route.
+
+::code-group
+
+```ts [en.ts]
+export default {
+  breadcrumb: {
+    items: {
+      index: {
+        icon: 'i-heroicons-home',
+        ariaLabel: 'Home'
+      }
+    }
+  }
+}
+```
+
+```json [en.json]
+{
+  "breadcrumb": {
+    "items": {
+      "index": {
+        "icon": "i-heroicons-home",
+        "ariaLabel": "Home"
+      }
+    }
+  }
+}
+```
+
+::
+
+
 ## Props
 
 ### `path`
@@ -55,38 +157,23 @@ Whether the root breadcrumb should be shown.
 
 Whether the current breadcrumb should be shown. This is usually the last item in the breadcrumb, but not always.
 
-## Guides
+### `overrides`
 
-### Modifying Labels
+- Type: `(BreadcrumbItem | false | undefined)[]`
+- Default: `[]`
 
-To determine the label of the item, it will use the `breadcrumb` property of the route meta.
+An array of items to override the generated breadcrumbs with.
 
-If you're using the [@nuxtjs/i18n](https://i18n.nuxtjs.org/) module, you can use the key `breadcrumbs.items.${routeName}`.
+### `append`
 
-::code-group
+- Type: `BreadcrumbItem[]`
+- Default: `[]`
 
-```vue [Page Meta]
-<script lang="ts" setup>
-definePageMeta({
-  breadcrumb: {
-    icon: 'i-heroicons-home',
-    ariaLabel: 'Home'
-  },
-})
-</script>
-```
+An array of items to append to the generated breadcrumbs.
 
-```json [I18n]
-{
-  "breadcrumb": {
-    "items": {
-      "index": {
-        "icon": "i-heroicons-home",
-        "ariaLabel": "Home"
-      }
-    }
-  }
-}
-```
+### `prepend`
 
-::
+- Type: `BreadcrumbItem[]`
+- Default: `[]`
+
+An array of items to prepend to the generated breadcrumbs.