Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/breadcrumb

Lineage

Shadcn

Docs

Spoke

Anatomy

import {
	Breadcrumb,
	BreadcrumbList,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbPage,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export default () => (
	<Breadcrumb>
		<BreadcrumbList>
			<BreadcrumbItem>
				<BreadcrumbLink />
			</BreadcrumbItem>
			<BreadcrumbSeparator />
			<BreadcrumbItem>
				<BreadcrumbPage />
			</BreadcrumbItem>
		</BreadcrumbList>
	</Breadcrumb>
)

Spoke utility classes

Class	Fallback chain	Description
`--breadcrumb-list`	`var(--muted-foreground)`	Colour for list breadcrumb variant
`--breadcrumb-link`	`var(--muted-foreground)`	Colour for link breadcrumb variant
`--breadcrumb-link-hover`	`var(--foreground)`	Colour for link hover breadcrumb variant
`--breadcrumb-page`	`var(--foreground)`	Colour for page breadcrumb variant
`--breadcrumb-separator`	`var(--muted-foreground)`	Colour for separator breadcrumb variant