Breadcrumb

Menampilkan jalur menuju halaman saat ini lewat susunan tautan berjenjang.

Instalasi

bash

npx shadcn-vue@latest add breadcrumb

Penggunaan

vue

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

Contoh

Pemisah Kustom

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

vue

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

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

vue

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

vue

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

vue

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

Badge Bubble

Di halaman ini

Instalasi Penggunaan Contoh Pemisah Kustom Dropdown Terlipat Komponen Link Responsif

Breadcrumb

Instalasi ​

Penggunaan ​

Contoh ​

Pemisah Kustom ​

Dropdown ​

Terlipat ​

Komponen Link ​

Responsif ​