PaperBreadcrumb

Minimal breadcrumb with slash separators and editorial text rhythm.

↗ slash separators. old-school and readable.

Preview

import * as React from 'react'
import Link from 'next/link'
import { cn } from '@/lib/utils'

export interface PaperBreadcrumbItem {
  label: string

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperBreadcrumb/paperBreadcrumb.tsx⎘
Step 2.Create the barrel:
components/ui/paperBreadcrumb/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperBreadcrumb'
```

Standard

Deep path

Prop	Type	Default	Description
`items`	`PaperBreadcrumbItem[]`	`[]`	Ordered path segments; last item becomes current page.

Great for deep component pages and guides.

<PaperBreadcrumb items={[...]} />

Use to orient users in nested dashboards.

<PaperBreadcrumb items={[...]} />