feat(Breadcrumb): new component (#506)

Co-authored-by: Eduard Aymerich <eduardaymerich@gmail.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/1.getting-started/3.theming.md

@@ -369,13 +369,29 @@ export default defineAppConfig({
     },
     pagination: {
       default: {
+        firstButton: {
+          icon: 'i-octicon-chevron-left-24'
+        },
         prevButton: {
           icon: 'i-octicon-arrow-left-24'
         },
         nextButton: {
           icon: 'i-octicon-arrow-right-24'
+        },
+        lastButton: {
+          icon: 'i-octicon-chevron-right-24'
         }
       }
+    },
+    accordion: {
+      default: {
+        openIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    breadcrumb: {
+      default: {
+        divider: 'i-octicon-chevron-right-24'
+      }
     }
   }
 })

docs/content/5.navigation/1.vertical-navigation.md

@@ -13,7 +13,7 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
 
 - `label` - The label of the link.
 - `icon` - The icon of the link.
-- `iconClass` - The class of the icon of the link.
+- `iconClass` - The class of the icon link.
 - `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
 - `badge` - A badge to display next to the label.
 - `click` - The click handler of the link.

docs/content/5.navigation/5.breadcrumb.md

@@ -0,0 +1,69 @@
+---
+title: Breadcrumb
+description: A list of links that indicate the current page's location within a navigational hierarchy.
+navigation:
+  badge: New
+---
+
+## Usage
+
+Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
+
+- `label` - The label of the link.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the icon link.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="breadcrumb-example-basic"}
+
+::callout{icon="i-heroicons-light-bulb"}
+A `span` will be rendered instead of a link when the `to` property is not defined.
+::
+
+## Divider
+
+Use the `divider` prop to customize the divider between each link, it can be **an icon or a string**. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
+
+You can set the prop to `null` to hide the divider. Additionally, you can customize it using the [`divider`](#divider-1) slot.
+
+::component-card
+---
+baseProps:
+  links:
+    - label: Home
+      to: /
+    - label: Navigation
+    - label: Breadcrumb
+props:
+  divider: '/'
+---
+::
+
+## Slots
+
+### `default`
+
+Use the `#default` slot to customize the link label. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
+
+:component-example{component="breadcrumb-example-default-slot"}
+
+### `icon`
+
+Use the `#icon` slot to customize the link icon. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
+
+:component-example{component="breadcrumb-example-icon-slot"}
+
+### `divider`
+
+Use the `divider` slot to customize the divider of the Breadcrumb.
+
+:component-example{component="breadcrumb-example-divider-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset