Components

Blocks

  1. Breadcrumb
    1. Default
    2. Size
    3. Custom separator
    4. With icons
    5. Props
component

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.

 
---
import Breadcrumb from "../Breadcrumb.astro";
---

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

Size

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

 
---
import Breadcrumb from "../Breadcrumb.astro";
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>

Custom separator

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

 
---
import Breadcrumb from "../Breadcrumb.astro";

const items = [
  { label: "Projects", href: "#" },
  { label: "pindoba", href: "#" },
  { label: "Settings" },
];
---

<Breadcrumb separator="›" items={items} />

With icons

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

 
---
import Breadcrumb from "../Breadcrumb.astro";
import BreadcrumbItem from "../BreadcrumbItem.astro";
import { Icon } from "astro-icon/components";
---

<Breadcrumb>
  <BreadcrumbItem href="#">
    <Icon slot="leading" name="lucide:house" />
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    <Icon slot="leading" name="lucide:book" />
    Library
  </BreadcrumbItem>
  <BreadcrumbItem current>
    <Icon slot="leading" name="lucide:component" />
    Components
  </BreadcrumbItem>
</Breadcrumb>

Props

props · 6 total
prop type default req description
items { label, href?, current?, icon? }[] — Item list. Omit href (or set current: true) to mark the current page.
separator string "/" —
label string "Breadcrumb" Sets aria-label on the wrapping nav landmark.
size "sm""md""lg" "md" —
background PanelBackground "transparent" Inherited from Panel.
passThrough { root?, list?, item?, link?, separator?, current? } — —