PXD

Breadcrumb

Displays the current page hierarchy and lets users navigate to parent routes.

Default

Use PBreadcrumbItem for each level. Set to on items that should navigate; the final item usually represents the current page and does not need a link.

<template>
  <PBreadcrumb>
    <PBreadcrumbItem to="/">Home</PBreadcrumbItem>
    <PBreadcrumbItem to="/guide/components">Components</PBreadcrumbItem>
    <PBreadcrumbItem>Breadcrumb</PBreadcrumbItem>
  </PBreadcrumb>
</template>

Separator

Set separator to use a custom character. Set separator-icon to render an icon instead; it takes precedence over separator.

<script setup>
import ChevronRightIcon from '@gdsicon/vue/chevron-right'
</script>

<template>
  <div class="flex flex-col gap-3">
    <PBreadcrumb separator=">">
      <PBreadcrumbItem to="/">Home</PBreadcrumbItem>
      <PBreadcrumbItem to="/guide/components">Components</PBreadcrumbItem>
      <PBreadcrumbItem>Breadcrumb</PBreadcrumbItem>
    </PBreadcrumb>

    <PBreadcrumb :separator-icon="ChevronRightIcon">
      <PBreadcrumbItem to="/">Home</PBreadcrumbItem>
      <PBreadcrumbItem to="/guide/components">Components</PBreadcrumbItem>
      <PBreadcrumbItem>Breadcrumb</PBreadcrumbItem>
    </PBreadcrumb>
  </div>
</template>

Replace Navigation

Use replace to navigate with RouterLink without creating a new browser history entry.

<template>
  <PBreadcrumb>
    <PBreadcrumbItem to="/" replace>Home</PBreadcrumbItem>
    <PBreadcrumbItem to="/guide/components">Components</PBreadcrumbItem>
    <PBreadcrumbItem>Breadcrumb</PBreadcrumbItem>
  </PBreadcrumb>
</template>

Props

NameTypeDefaultDescription
separatorstring'/'Character rendered between items.
separator-iconstring | Component-Icon rendered between items. Overrides separator.
NameTypeDefaultDescription
tostring | object-Target route passed to the global RouterLink.
replacebooleanfalseReplaces the current history entry when navigating.

Slots

NameDescription
defaultBreadcrumb items.
NameDescription
defaultContent for the breadcrumb item.

Source

Source