UIPackage
Vue React

Breadcrumb

Vue navigation
Edit on GitHub

Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/breadcrumb.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/breadcrumb

Examples

Props

Name Type / Values Default Required
class HTMLAttributes['class'] — optional

Dependencies

lucide-vue-nextreka-ui

Used by

dashboard-layout

Files (8)

  • app/components/ui/breadcrumb/Breadcrumb.vue 0.3 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <nav aria-label="breadcrumb" data-uipkge data-slot="breadcrumb" :class="props.class">
    <slot />
  </nav>
</template>
  • app/components/ui/breadcrumb/BreadcrumbEllipsis.vue 0.5 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { MoreHorizontal } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="breadcrumb-ellipsis"
    :class="cn('flex size-11 items-center justify-center', props.class)"
  >
    <slot>
      <MoreHorizontal class="size-4" aria-hidden="true" />
    </slot>
    <span class="sr-only">More</span>
  </span>
</template>
  • app/components/ui/breadcrumb/BreadcrumbItem.vue 0.3 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li data-uipkge data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
    <slot />
  </li>
</template>
  • app/components/ui/breadcrumb/BreadcrumbLink.vue 0.7 kB 
    <script lang="ts" setup>
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'a',
})
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="breadcrumb-link"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2',
        props.class,
      )
    "
  >
    <slot />
  </Primitive>
</template>
  • app/components/ui/breadcrumb/BreadcrumbList.vue 0.4 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ol
    data-uipkge
    data-slot="breadcrumb-list"
    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
  >
    <slot />
  </ol>
</template>
  • app/components/ui/breadcrumb/BreadcrumbPage.vue 0.4 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="breadcrumb-page"
    aria-current="page"
    :class="cn('text-foreground cursor-default font-normal', props.class)"
  >
    <slot />
  </span>
</template>
  • app/components/ui/breadcrumb/BreadcrumbSeparator.vue 0.5 kB 
    <script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-uipkge
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    :class="cn('[&>svg]:size-3.5', props.class)"
  >
    <slot>
      <ChevronRight />
    </slot>
  </li>
</template>
  • app/components/ui/breadcrumb/index.ts 0.5 kB 
    export { default as Breadcrumb } from './Breadcrumb.vue'
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
export { default as BreadcrumbList } from './BreadcrumbList.vue'
export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

Raw manifest: https://uipkge.dev/r/vue/breadcrumb.json