component
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.
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" },
]}
/>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>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} />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 { Book, Component, House } from "@lucide/astro";
---
<Breadcrumb>
<BreadcrumbItem href="#">
<House slot="leading" />
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
<Book slot="leading" />
Library
</BreadcrumbItem>
<BreadcrumbItem current>
<Component slot="leading" />
Components
</BreadcrumbItem>
</Breadcrumb>falseMark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The three values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), and `"current"` by an existing `aria-current`.
the panel's `emphasis`How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the feedback accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the feedback surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.
Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).
Border style: `none`, `default`, `bold`, or `muted`.
No description yet.
Border style applied on hover / focus interaction.
Semantic color tone: `neutral`, `primary`, `success`, `warning`, `danger`, or `inherit`.
Enable interactive (hover / focus / press) affordances and states.
Item list. Omit `href` (or set `current: true`) to mark the current page.
"Breadcrumb"Sets `aria-label` on the wrapping `<nav>` landmark.
Per-slot style/attribute override bag for customizing any rendered slot.
Corner radius override from the spacing scale (or `full` for fully rounded).
Corner radius for the bottom-left and bottom-right corners.
Corner radius for the top-left and bottom-left corners.
Corner radius for the top-right and bottom-right corners.
Corner radius for the top-left and top-right corners.
Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).
"/"Separator string rendered between items. Override the default with any string.
Elevation shadow applied to the surface.
"md"Visual size of the breadcrumb; scales the text only.
Apply a frosted-glass effect with backdrop blur over a surface background.
Additional class names applied to the item's root element.
Marks this item as the current page. Renders as text with `aria-current`.
Destination URL. Omit on the current page item.
Per-slot style/attribute override bag for customizing any rendered slot.