Breadcrumb

Navigation 16

About

Breadcrumb component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumb to your project and fits it to your theme.

Code

How Breadcrumb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import React from 'react';
import Breadcrumb, {
   BreadcrumbList,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
   BreadcrumbPage,
} from '@/components/ui/breadcrumb';

const BreadcrumbDemo = () => {
   return (
      <div className="flex w-full items-center justify-center p-4">
         <Breadcrumb>
            <BreadcrumbList>
               <BreadcrumbItem>
                  <BreadcrumbLink href="/">Home</BreadcrumbLink>
               </BreadcrumbItem>
               <BreadcrumbSeparator />
               <BreadcrumbItem>
                  <BreadcrumbEllipsis />
               </BreadcrumbItem>
               <BreadcrumbSeparator />
               <BreadcrumbItem>
                  <BreadcrumbLink href="/components">Components</BreadcrumbLink>
               </BreadcrumbItem>
               <BreadcrumbSeparator />
               <BreadcrumbItem>
                  <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
               </BreadcrumbItem>
            </BreadcrumbList>
         </Breadcrumb>
      </div>
   );
};

export { BreadcrumbDemo as DemoOne };