Breadcrumb

Shows a user’s location in a nested hierarchy as a trail of links. Rendered as a <nav aria-label="Breadcrumb"> wrapping an ordered list, with the last item marked aria-current="page" by default.

Default

Pass an items array; the last item is treated as the current page unless you set current explicitly.

PreviewCode

---
// GENERATED from packages/demos/breadcrumb/default.demo.tsx — edit the source, not this file.
import Breadcrumb from "@pindoba/astro-breadcrumb";
---

<Breadcrumb
  items={[
    { label: "Home", href: "#" },
    { label: "Components", href: "#" },
    { label: "Breadcrumb" },
  ]}
/>

// GENERATED from packages/demos/breadcrumb/default.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/react-breadcrumb";

export default function DefaultDemo() {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "#" },
        { label: "Components", href: "#" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

<script lang="ts">
  // GENERATED from packages/demos/breadcrumb/default.demo.tsx — edit the source, not this file.
  import Breadcrumb from "@pindoba/svelte-breadcrumb";
</script>

<Breadcrumb
  items={[
    { label: "Home", href: "#" },
    { label: "Components", href: "#" },
    { label: "Breadcrumb" },
  ]}
></Breadcrumb>

<script setup lang="ts">
// GENERATED from packages/demos/breadcrumb/default.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/vue-breadcrumb";
</script>

<template>
  <Breadcrumb
    :items="[
      { label: 'Home', href: '#' },
      { label: 'Components', href: '#' },
      { label: 'Breadcrumb' },
    ]"
  ></Breadcrumb>
</template>

// GENERATED from packages/demos/breadcrumb/default.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/solid-breadcrumb";

export default function DefaultDemo() {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "#" },
        { label: "Components", href: "#" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

Size

Three sizes — sm, md, lg — scale the text only.

PreviewCode

---
// GENERATED from packages/demos/breadcrumb/size.demo.tsx — edit the source, not this file.
import Breadcrumb from "@pindoba/astro-breadcrumb";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Breadcrumb" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Breadcrumb size="sm" items={items} />
  <Breadcrumb size="md" items={items} />
  <Breadcrumb size="lg" items={items} />
</div>

// GENERATED from packages/demos/breadcrumb/size.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/react-breadcrumb";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Breadcrumb" },
];
export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Breadcrumb size="sm" items={items} />
      <Breadcrumb size="md" items={items} />
      <Breadcrumb size="lg" items={items} />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/breadcrumb/size.demo.tsx — edit the source, not this file.
  import Breadcrumb from "@pindoba/svelte-breadcrumb";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { label: "Home", href: "#" },
    { label: "Docs", href: "#" },
    { label: "Breadcrumb" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Breadcrumb size="sm" {items}></Breadcrumb>
  <Breadcrumb size="md" {items}></Breadcrumb>
  <Breadcrumb size="lg" {items}></Breadcrumb>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/breadcrumb/size.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/vue-breadcrumb";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Breadcrumb" },
];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Breadcrumb size="sm" :items="items"></Breadcrumb>
    <Breadcrumb size="md" :items="items"></Breadcrumb>
    <Breadcrumb size="lg" :items="items"></Breadcrumb>
  </div>
</template>

// GENERATED from packages/demos/breadcrumb/size.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/solid-breadcrumb";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Breadcrumb" },
];
export default function SizeDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <Breadcrumb size="sm" items={items} />
      <Breadcrumb size="md" items={items} />
      <Breadcrumb size="lg" items={items} />
    </div>
  );
}

Custom separator

Override the default / with any string via the separator prop.

PreviewCode

---
// GENERATED from packages/demos/breadcrumb/custom-separator.demo.tsx — edit the source, not this file.
import Breadcrumb from "@pindoba/astro-breadcrumb";
---

<Breadcrumb
  separator="›"
  items={[
    { label: "Projects", href: "#" },
    { label: "pindoba", href: "#" },
    { label: "Settings" },
  ]}
/>

// GENERATED from packages/demos/breadcrumb/custom-separator.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/react-breadcrumb";

export default function CustomSeparatorDemo() {
  return (
    <Breadcrumb
      separator="›"
      items={[
        { label: "Projects", href: "#" },
        { label: "pindoba", href: "#" },
        { label: "Settings" },
      ]}
    />
  );
}

<script lang="ts">
  // GENERATED from packages/demos/breadcrumb/custom-separator.demo.tsx — edit the source, not this file.
  import Breadcrumb from "@pindoba/svelte-breadcrumb";
</script>

<Breadcrumb
  separator="›"
  items={[
    { label: "Projects", href: "#" },
    { label: "pindoba", href: "#" },
    { label: "Settings" },
  ]}
></Breadcrumb>

<script setup lang="ts">
// GENERATED from packages/demos/breadcrumb/custom-separator.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/vue-breadcrumb";
</script>

<template>
  <Breadcrumb
    separator="›"
    :items="[
      { label: 'Projects', href: '#' },
      { label: 'pindoba', href: '#' },
      { label: 'Settings' },
    ]"
  ></Breadcrumb>
</template>

// GENERATED from packages/demos/breadcrumb/custom-separator.demo.tsx — edit the source, not this file.
import { Breadcrumb } from "@pindoba/solid-breadcrumb";

export default function CustomSeparatorDemo() {
  return (
    <Breadcrumb
      separator="›"
      items={[
        { label: "Projects", href: "#" },
        { label: "pindoba", href: "#" },
        { label: "Settings" },
      ]}
    />
  );
}

With icons

Each item can render a leading icon. In Astro pass an iconify icon name; in Svelte pass a snippet.

PreviewCode

---
// GENERATED from packages/demos/breadcrumb/with-icons.demo.tsx — edit the source, not this file.
import Breadcrumb from "@pindoba/astro-breadcrumb";
import { BreadcrumbItem } from "@pindoba/astro-breadcrumb";
import { House, Book, Component } from "@lucide/astro";
---

<Breadcrumb>
  <BreadcrumbItem href="#">
    <Fragment slot="leading">
      <House size={16} />
    </Fragment>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    <Fragment slot="leading">
      <Book size={16} />
    </Fragment>
    Library
  </BreadcrumbItem>
  <BreadcrumbItem current>
    <Fragment slot="leading">
      <Component size={16} />
    </Fragment>
    Components
  </BreadcrumbItem>
</Breadcrumb>

// GENERATED from packages/demos/breadcrumb/with-icons.demo.tsx — edit the source, not this file.
import { Breadcrumb, BreadcrumbItem } from "@pindoba/react-breadcrumb";
import { House } from "lucide-react";
import { Book } from "lucide-react";
import { Component } from "lucide-react";

export default function WithIconsDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#" leading={<House size={16} />}>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="#" leading={<Book size={16} />}>
        Library
      </BreadcrumbItem>
      <BreadcrumbItem current leading={<Component size={16} />}>
        Components
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/breadcrumb/with-icons.demo.tsx — edit the source, not this file.
  import Breadcrumb from "@pindoba/svelte-breadcrumb";
  import { BreadcrumbItem } from "@pindoba/svelte-breadcrumb";
  import LucideHouse from "@lucide/svelte/icons/house";
  import LucideBook from "@lucide/svelte/icons/book";
  import LucideComponent from "@lucide/svelte/icons/component";
</script>

<Breadcrumb>
  <BreadcrumbItem href="#">
    {#snippet leading()}
      <LucideHouse size={16} />
    {/snippet}
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    {#snippet leading()}
      <LucideBook size={16} />
    {/snippet}
    Library
  </BreadcrumbItem>
  <BreadcrumbItem current>
    {#snippet leading()}
      <LucideComponent size={16} />
    {/snippet}
    Components
  </BreadcrumbItem>
</Breadcrumb>

<script setup lang="ts">
// GENERATED from packages/demos/breadcrumb/with-icons.demo.tsx — edit the source, not this file.
import { Breadcrumb, BreadcrumbItem } from "@pindoba/vue-breadcrumb";
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem href="#">
      <template #leading>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-house"
          aria-hidden="true"
        >
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
          <path
            d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
          />
        </svg>
      </template>
      Home
    </BreadcrumbItem>
    <BreadcrumbItem href="#">
      <template #leading>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-book"
          aria-hidden="true"
        >
          <path
            d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
          />
        </svg>
      </template>
      Library
    </BreadcrumbItem>
    <BreadcrumbItem :current="true">
      <template #leading>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-component"
          aria-hidden="true"
        >
          <path
            d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"
          />
        </svg>
      </template>
      Components
    </BreadcrumbItem>
  </Breadcrumb>
</template>

// GENERATED from packages/demos/breadcrumb/with-icons.demo.tsx — edit the source, not this file.
import { Breadcrumb, BreadcrumbItem } from "@pindoba/solid-breadcrumb";

export default function WithIconsDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem
        href="#"
        leading={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-house"
            aria-hidden="true"
          >
            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
            <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
          </svg>
        }
      >
        Home
      </BreadcrumbItem>
      <BreadcrumbItem
        href="#"
        leading={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-book"
            aria-hidden="true"
          >
            <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
          </svg>
        }
      >
        Library
      </BreadcrumbItem>
      <BreadcrumbItem
        current
        leading={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-component"
            aria-hidden="true"
          >
            <path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z" />
            <path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z" />
            <path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z" />
            <path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z" />
          </svg>
        }
      >
        Components
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

#Default

#Size

#Custom separator

#With icons

Default

Size

Custom separator

With icons