StorybookGitHub

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/breadcrumb.json

Usage

Use breadcrumbs to show navigation context within nested pages.

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

Compose BreadcrumbEllipsis for collapsed middle segments. Pass a custom child to BreadcrumbSeparator for an alternate divider, or use Nuxt's <NuxtLink> inside BreadcrumbLink for router links.