feat(Breadcrumb): new component (#506)

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

docs/components/content/examples/BreadcrumbExampleBasic.vue

@@ -0,0 +1,17 @@
+<script setup>
+const links = [{
+  label: 'Home',
+  icon: 'i-heroicons-home',
+  to: '/'
+}, {
+  label: 'Navigation',
+  icon: 'i-heroicons-square-3-stack-3d'
+}, {
+  label: 'Breadcrumb',
+  icon: 'i-heroicons-link'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links" />
+</template>

docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue

@@ -0,0 +1,20 @@
+<script setup>
+const links = [{
+  label: 'Home',
+  to: '/'
+}, {
+  label: 'Navigation'
+}, {
+  label: 'Breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links">
+    <template #default="{ link, isActive, index }">
+      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full">
+        {{ index + 1 }}. {{ link.label }}
+      </UBadge>
+    </template>
+  </UBreadcrumb>
+</template>

docs/components/content/examples/BreadcrumbExampleDividerSlot.vue

@@ -0,0 +1,21 @@
+<script setup>
+const links = [{
+  label: 'Home',
+  icon: 'i-heroicons-home',
+  to: '/'
+}, {
+  label: 'Navigation',
+  icon: 'i-heroicons-square-3-stack-3d'
+}, {
+  label: 'Breadcrumb',
+  icon: 'i-heroicons-link'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links" :ui="{ ol: 'gap-x-3', li: 'gap-x-3' }">
+    <template #divider>
+      <span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
+    </template>
+  </UBreadcrumb>
+</template>

docs/components/content/examples/BreadcrumbExampleIconSlot.vue

@@ -0,0 +1,25 @@
+<script setup>
+const links = [{
+  label: 'Home',
+  to: '/'
+}, {
+  label: 'Navigation'
+}, {
+  label: 'Breadcrumb'
+}]
+</script>
+
+<template>
+  <UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
+    <template #icon="{ link, index, isActive }">
+      <UAvatar
+        :alt="(index + 1 ).toString()"
+        :ui="{
+          background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
+          placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
+        }"
+        size="xs"
+      />
+    </template>
+  </UBreadcrumb>
+</template>

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