Breadcrumb/breadcrumb-standard-

PreviousNext

A breadcrumb/breadcrumb-standard- example

Docs
shadcnblocksblock

Preview

Loading preview…
code/example/breadcrumb/breadcrumb-standard-5.tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export const title = "Breadcrumb with Bullet Separator";

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>•</BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>•</BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

Installation

npx shadcn@latest add @shadcnblocks/breadcrumb-breadcrumb-standard-5

Usage

import { BreadcrumbBreadcrumbStandard5 } from "@/components/breadcrumb-breadcrumb-standard-5"
<BreadcrumbBreadcrumbStandard5 />