How do I install the Breadcrumb component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { Breadcrumb }. Copy-paste distribution is also supported.

Is the Breadcrumb component free to use?

Yes. Breadcrumb ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Breadcrumb page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Breadcrumb

LayoutMIT

View in Storybook

Path-style hierarchy navigation with separators and overflow handling.

bun add @otfdashkit/ui

Preview

BreadcrumbLayout

Loading Storybook preview…

Code

@otfdashkit/ui

import { Breadcrumb, BreadcrumbItem, BreadcrumbPage } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-4">
      <Breadcrumb>
        <BreadcrumbItem href="/" label="Home" />
        <BreadcrumbItem href="/projects" label="Projects" />
        <BreadcrumbPage>My App</BreadcrumbPage>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem href="/" label="Dashboard" />
        <BreadcrumbItem href="/settings" label="Settings" />
        <BreadcrumbPage>Billing</BreadcrumbPage>
      </Breadcrumb>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the Breadcrumb source. Inherited HTML attributes are not listed.

Prop	Type	Default	Description
childrenrequired	ReactNode
className	string

Preview

Code

Props

Related