StacklyUI
Components/Breadcrumb

Breadcrumb

Shows the path to the current page.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
)
02

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/breadcrumb

Or install the package and import it:

$pnpm add @stacklyui/ui motion
03

Usage

Import Breadcrumb from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.