Breadcrumb

Preview

import {
    Breadcrumb,
    BreadcrumbEllipsis,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/registry/components/breadcrumb/react/breadcrumb";


export function BreadcrumbDemo() {
    return (
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink asChild>
                        <a href="/">Home</a>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbEllipsis />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink asChild>
                        <a href="/docs/components">Components</a>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    );
}

Installation

You can add the breadcrumb component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the breadcrumb component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components breadcrumb --framework react
npx make-sugarcube@latest components breadcrumb --framework react
yarn make-sugarcube@latest components breadcrumb --framework react
bunx --bun make-sugarcube@latest components breadcrumb --framework react

What’s included

When you add the button component, you get:

  • breadcrumb.tsx - The React component implementation
  • breadcrumb.css - The base styles for the breadcrumb
  • @clsx - The clsx utility for conditional classes
import { Slot } from "@radix-ui/react-slot";
import cn from "clsx";
import { ChevronRight, MoreHorizontal } from "lucide-react";


function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
    return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
}


function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
    return (
        <ol data-slot="breadcrumb-list" className={cn("breadcrumb-list", className)} {...props} />
    );
}


function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
    return (
        <li data-slot="breadcrumb-item" className={cn("breadcrumb-item", className)} {...props} />
    );
}


function BreadcrumbLink({
    asChild,
    className,
    ...props
}: React.ComponentProps<"a"> & {
    asChild?: boolean;
}) {
    const Comp = asChild ? Slot : "a";


    return (
        <Comp data-slot="breadcrumb-link" className={cn("breadcrumb-link", className)} {...props} />
    );
}


function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
    return (
        <span
            data-slot="breadcrumb-page"
            aria-disabled="true"
            aria-current="page"
            className={cn("breadcrumb-page", className)}
            {...props}
        />
    );
}


function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
    return (
        <li
            data-slot="breadcrumb-separator"
            role="presentation"
            aria-hidden="true"
            className={cn("breadcrumb-separator", className)}
            {...props}
        >
            {children ?? <ChevronRight />}
        </li>
    );
}


function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
    return (
        <span
            data-slot="breadcrumb-ellipsis"
            role="presentation"
            aria-hidden="true"
            className={cn("breadcrumb-ellipsis", className)}
            {...props}
        >
            <MoreHorizontal />
            <span className="visually-hidden">More</span>
        </span>
    );
}


export {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbPage,
    BreadcrumbSeparator,
    BreadcrumbEllipsis,
};

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::