Breadcrumb
A path with a distinct current location.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Breadcrumb
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/breadcrumb.json'Usage
A complete example using the installed component and hook paths.
Breadcrumb usage
"use client";import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";function BreadcrumbPreview() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbLink href="/docs">Components</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator /> <BreadcrumbItem> <BreadcrumbPage>Navigation</BreadcrumbPage> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> );}export default function Demo() { return <BreadcrumbPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Breadcrumb
Breadcrumb props
React.ComponentProps<"nav">BreadcrumbList
BreadcrumbList props
React.ComponentProps<"ol">BreadcrumbItem
BreadcrumbItem props
React.ComponentProps<"li">BreadcrumbLink
BreadcrumbLink props
useRender.ComponentProps<"a"> & { sound?: boolean }- sound
- true
BreadcrumbPage
BreadcrumbPage props
React.ComponentProps<"span">BreadcrumbSeparator
BreadcrumbSeparator props
React.ComponentProps<"li">BreadcrumbEllipsis
BreadcrumbEllipsis props
React.ComponentProps<"span">