Breadcrumb

npx shadcn@latest add https://ui.saasflare.io/r/breadcrumb.json

pnpm add @saasflare/ui

"use client"import {    Breadcrumb,    BreadcrumbItem,    BreadcrumbLink,    BreadcrumbList,    BreadcrumbPage,    BreadcrumbSeparator,} from "@saasflare/ui"/** A navigation trail showing the current page within the dashboard hierarchy. */export function Demo() {    return (        <Breadcrumb>            <BreadcrumbList>                <BreadcrumbItem>                    <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>                </BreadcrumbItem>                <BreadcrumbSeparator />                <BreadcrumbItem>                    <BreadcrumbLink href="#">Settings</BreadcrumbLink>                </BreadcrumbItem>                <BreadcrumbSeparator />                <BreadcrumbItem>                    <BreadcrumbPage>Billing</BreadcrumbPage>                </BreadcrumbItem>            </BreadcrumbList>        </Breadcrumb>    )}

"use client"import {    Breadcrumb,    BreadcrumbEllipsis,    BreadcrumbItem,    BreadcrumbLink,    BreadcrumbList,    BreadcrumbPage,    BreadcrumbSeparator,} from "@saasflare/ui"/** A long path collapsed with an ellipsis for deeply nested resources. */export function Demo() {    return (        <Breadcrumb>            <BreadcrumbList>                <BreadcrumbItem>                    <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>                </BreadcrumbItem>                <BreadcrumbSeparator />                <BreadcrumbItem>                    <BreadcrumbEllipsis />                </BreadcrumbItem>                <BreadcrumbSeparator />                <BreadcrumbItem>                    <BreadcrumbLink href="#">Workspace</BreadcrumbLink>                </BreadcrumbItem>                <BreadcrumbSeparator />                <BreadcrumbItem>                    <BreadcrumbPage>API Keys</BreadcrumbPage>                </BreadcrumbItem>            </BreadcrumbList>        </Breadcrumb>    )}