# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## breadcrumb Accessible breadcrumb trail: asChild router links, current page, separators, ellipsis. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add breadcrumb` Also adds: utils, theme npm: @radix-ui/react-slot@^1.5.0 lucide-react@^1.61.0 ```tsx import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/ui/breadcrumb"; ``` ### Example ```tsx import Link from "next/link"; import { FolderIcon, HomeIcon } from "lucide-react"; import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; export default function Demo() { return (

Workspace Mobile app MOB-142 Offline sync Acme / Engineering Platform team / Q4 roadmap / Settings

); } ``` ### Source: ui/breadcrumb.tsx ```tsx import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import { cn } from "@/lib/utils"; function Breadcrumb({ "aria-label": ariaLabel = "Breadcrumb", ...props }: React.ComponentProps<"nav">) { return

; } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return (

; } type BreadcrumbLinkProps = React.ComponentProps<"a"> & { /** render the child (e.g. Next.js ) with these styles */ asChild?: boolean; }; function BreadcrumbLink({ className, asChild = false, ...props }: BreadcrumbLinkProps) { const Comp = asChild ? Slot : "a"; return ( ); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( ); } function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"li">) { return (
{children ?? }

Breadcrumb

Installation

Usage

Breadcrumb

Installation

Usage