fix(Breadcrumb): render as nav

Resolves #2649
nuxt · Nov 15, 2024 · 756f791 · 756f791
1 parent 8ed434c
commit 756f791
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 45 deletions.
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
@@ -21,7 +21,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
 export interface BreadcrumbProps<T> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @defaultValue 'nav'
    */
   as?: any
   items?: T[]
@@ -88,6 +88,7 @@ import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 
 const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
   labelKey: 'label'
 })
 const slots = defineSlots<BreadcrumbSlots<T>>()

diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
@@ -25,6 +25,7 @@ describe('Breadcrumb', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with as', { props: { ...props, as: 'div' } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with separatorIcon', { props: { ...props, separatorIcon: 'i-lucide-minus' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],