Breadcrumb

Displays the current page's location within a navigational hierarchy.

?

Name	Category	Description	Type	Default
BreadcrumbItemicon	? Style	Icon name (supports all built-in pixel icons)	string	—
BreadcrumbItemdisabled	? State	Whether disabled	boolean	false
separator	? Content	Separator text between breadcrumb items	string	'/'
BreadcrumbItemto	? Content	Link URL. When set, renders as an <a> tag	string	—
default	? Slot	Breadcrumb items content		—
separator	? Slot	Custom separator content		—
BreadcrumbItemdefault	? Slot	Breadcrumb item text content		—

Basic Usage

The simplest breadcrumb with text items. Items with a to prop render as links; the last item (without to) is shown as the current page.

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
    <px-breadcrumb-item>Current Page</px-breadcrumb-item>
  </px-breadcrumb>
</template>

With Icons

Add pixel icons to breadcrumb items using the icon prop.

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#" icon="home">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#" icon="folder">Documents</px-breadcrumb-item>
    <px-breadcrumb-item icon="file">Current File</px-breadcrumb-item>
  </px-breadcrumb>
</template>

Disabled

Use the disabled prop to disable a breadcrumb item. Disabled items are not clickable.

<script setup lang="ts"></script>

<template>
  <px-breadcrumb>
    <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
    <px-breadcrumb-item to="#" disabled>Products</px-breadcrumb-item>
    <px-breadcrumb-item>Current Page</px-breadcrumb-item>
  </px-breadcrumb>
</template>

Custom Separator

Use the separator prop for a simple text separator, or the #separator slot for a custom component (e.g. an icon).

<script setup lang="ts"></script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <px-breadcrumb separator=">">
      <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
      <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
      <px-breadcrumb-item>Detail</px-breadcrumb-item>
    </px-breadcrumb>

    <px-breadcrumb>
      <template #separator>
        <px-icon icon="chevron-right" />
      </template>
      <px-breadcrumb-item to="#">Home</px-breadcrumb-item>
      <px-breadcrumb-item to="#">Products</px-breadcrumb-item>
      <px-breadcrumb-item>Detail</px-breadcrumb-item>
    </px-breadcrumb>
  </div>
</template>