Stalk UI

Component

Breadcrumb

Shows the path to the current page as a navigable trail.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/breadcrumb

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>
Theme
<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Ellipsis />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Settings</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`label``string`No-Visually-hidden label announced for the collapsed items.
PropTypeRequiredDefaultDescription
`asChild``boolean`No-Render the single child element (e.g. a router \`<Link>\`) instead of an \`<a>\`.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/breadcrumb.json`
  • Recipe: `breadcrumb`
  • Files: `src/components/ui/breadcrumb.tsx`