1. Home
5. Components
7. Breadcrumb

Installation

pnpm dlx kliping@latest add breadcrumb

Usage

<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>

Examples

Pemisah Kustom

Sisipkan komponen Anda sendiri sebagai isi <BreadcrumbSeparator /> untuk membuat pemisah kustom.

1. Home
3. Components
5. Breadcrumb

<script setup lang="ts">
import { SlashIcon } from '@lucide/vue'
// ...
</script>

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

---

Dropdown

Padukan <BreadcrumbItem /> dengan <DropdownMenu /> untuk membuat dropdown di dalam breadcrumb.

1. Home
5. Breadcrumb

<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
//...
</script>

<template>
  <BreadcrumbItem>
    <DropdownMenu>
      <DropdownMenuTrigger>
        Components
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem>Documentation</DropdownMenuItem>
        <DropdownMenuItem>Themes</DropdownMenuItem>
        <DropdownMenuItem>GitHub</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </BreadcrumbItem>
</template>

---

Terlipat

Tersedia komponen <BreadcrumbEllipsis /> untuk menampilkan keadaan terlipat saat breadcrumb terlalu panjang.

1. Home
3. More
5. Components
7. Breadcrumb

<script setup lang="ts">
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
//...
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <!-- ... -->
      <BreadcrumbItem>
        <BreadcrumbEllipsis />
      </BreadcrumbItem>
    <!-- ... -->
    </BreadcrumbList>
  </Breadcrumb>
</template>

---

Komponen Link

Untuk memakai komponen link dari library routing Anda, gunakan prop as-child pada <BreadcrumbLink />.

1. Home
3. Components
5. Breadcrumb

<script setup lang="ts">
import { NuxtLink } from '#components'
// ...
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink as-child>
          <NuxtLink to="/">
            Home
          </NuxtLink>
        </BreadcrumbLink>
      </BreadcrumbItem>
      {/* ... */}
    </BreadcrumbList>
  </Breadcrumb>
</template>

---

Responsif

Berikut contoh breadcrumb responsif yang memadukan <BreadcrumbItem /> dengan <BreadcrumbEllipsis />, <DropdownMenu />, dan <Drawer />.

Tampilannya berupa dropdown di desktop dan drawer di mobile.

1. Home
5. Data Fetching
7. Caching and Revalidating

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, reka-ui@^2.10.3
Files	components/ui/breadcrumb/breadcrumb.vue components/ui/breadcrumb/breadcrumb-ellipsis.vue components/ui/breadcrumb/breadcrumb-item.vue components/ui/breadcrumb/breadcrumb-link.vue components/ui/breadcrumb/breadcrumb-list.vue components/ui/breadcrumb/breadcrumb-page.vue components/ui/breadcrumb/breadcrumb-separator.vue components/ui/breadcrumb/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
      <BreadcrumbEllipsis />
      <BreadcrumbPage />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
  </BreadcrumbList>
</Breadcrumb>

API Reference

Breadcrumb

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb"

BreadcrumbEllipsis

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-ellipsis"

BreadcrumbItem

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-item"

BreadcrumbLink

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"a"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-link"

BreadcrumbList

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-list"

BreadcrumbPage

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-page"

BreadcrumbSeparator

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"breadcrumb-separator"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --foreground, --muted-foreground.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.