Breadcrumb

Where this page sits: the pages above it in leaning type, set apart by a short slanted bar, the slab's edge on its own.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/breadcrumb

Examples

A trail with pages left out

breadcrumb-basic.tsx

import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/zero/breadcrumb";export default function BreadcrumbBasic() {  return (    <Breadcrumb>      <BreadcrumbList>        <BreadcrumbItem>          <BreadcrumbLink href="#board">Board</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbEllipsis />        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbLink href="#east">East district</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbPage>Sealed crate</BreadcrumbPage>        </BreadcrumbItem>      </BreadcrumbList>    </Breadcrumb>  );}

Behaviour

The pages above are quiet and light up when pointed at; the current page is the brightest and heaviest, marked aria-current="page". BreadcrumbEllipsis stands in for pages left out.

BreadcrumbLink is an anchor; render takes a router's link instead.

Props

BreadcrumbLink

Prop	Type	Default	Description
render	ReactElement	—	The element to render as, such as a router link.