A trail, and a long one folded behind a menu

// apps/docs/examples/ui/breadcrumb.tsx'use client';
import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from '@workspace/active-ui/components/primitives/breadcrumb';import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuTrigger,} from '@workspace/active-ui/components/primitives/dropdown-menu';
/** * Where the page sits in its hierarchy, as links to each level and the * current page last. When the trail is long, the middle levels fold behind * an ellipsis that opens a menu with them. The links point to anchors on * this page; in an application they are your routes. */export default function BreadcrumbExample() {  return (    <div className="flex flex-col gap-6">      <Breadcrumb label="Breadcrumb">        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-schemes">Schemes</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Pension scheme 2026</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>
      <Breadcrumb label="Breadcrumb, shortened">        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <DropdownMenu>              <DropdownMenuTrigger                aria-label="Show the hidden levels"                className="flex items-center"              >                <BreadcrumbEllipsis />              </DropdownMenuTrigger>              <DropdownMenuContent align="start" className="w-48">                <DropdownMenuItem render={<a href="#breadcrumb-schemes" />}>                  Schemes                </DropdownMenuItem>                <DropdownMenuItem render={<a href="#breadcrumb-scheme" />}>                  Pension scheme 2026                </DropdownMenuItem>              </DropdownMenuContent>            </DropdownMenu>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-participants">              Participants            </BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Sam de Vries</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </div>  );}