Command Menu

Search documentation, components, and switch theme.

Atoms

Breadcrumb

Navigation breadcrumb showing the current page hierarchy.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/breadcrumb

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/ledgers">Ledgers</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Transactions</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>