Path Breadcrumb

URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Nav13 } from "@/components/beste/piece/nav13";

<Nav13
  segments={[
    "acme-studio",
    "marketing-site",
    "docs",
    "overview.mdx"
  ]}
/>

More Nav pieces

View all Nav

Compact breadcrumb trail with chevron separators and the trailing crumb rendered in bold.

Breadcrumb trail with a home icon, chevron separators, and a bold final crumb.

Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.

Breadcrumb that hides middle crumbs behind a dropdown chip so the trail stays on a single row.

Quick commands

Slash-command flyout listing mono commands with hints beside them and a slash glyph prefix column.

app
page.tsx
layout.tsx
components
tailwind.config.ts

Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.