# V breadcrumb 11

> File path breadcrumb with folder and file icons in monospace

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-breadcrumb-11).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-breadcrumb-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-breadcrumb-11-light-c657bb0361640811.png
- Registry item: https://ui.cnippet.dev/r/v-breadcrumb-11.json
- Categories: breadcrumb
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/breadcrumb`

## Files

### `registry/default/variants/v-breadcrumb-11.tsx`

```tsx
import { FileIcon, FolderIcon } from "lucide-react";
import { Fragment } from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/default/ui/breadcrumb";
import { Frame, FramePanel } from "@/registry/default/ui/frame";

const segments = [
  { href: "#", icon: FolderIcon, label: "projects" },
  { href: "#", icon: FolderIcon, label: "ui-cnippet" },
  { href: "#", icon: FolderIcon, label: "apps" },
  { href: "#", icon: FolderIcon, label: "v2" },
  { href: "#", icon: FolderIcon, label: "registry" },
];
const current = { icon: FileIcon, label: "registry-variants.ts" };

export function Pattern() {
  return (
    <Frame>
      <FramePanel className="overflow-x-auto">
        <Breadcrumb>
          <BreadcrumbList className="flex-nowrap sm:gap-1">
            {segments.map((seg) => (
              <Fragment key={seg.label}>
                <BreadcrumbItem>
                  <BreadcrumbLink
                    className="flex items-center gap-1 font-mono text-xs"
                    href={seg.href}
                  >
                    <seg.icon className="size-3.5 shrink-0 text-muted-foreground" />
                    {seg.label}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="text-muted-foreground/50">
                  /
                </BreadcrumbSeparator>
              </Fragment>
            ))}
            <BreadcrumbItem>
              <BreadcrumbPage className="flex items-center gap-1 font-mono text-xs">
                <current.icon className="size-3.5 shrink-0 text-sky-500" />
                {current.label}
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </FramePanel>
    </Frame>
  );
}
```