Breadcrumb
Breadcrumb is a component component that provides breadcrumb functionality.
Active
Installation
npm install @your-design-system/breadcrumbimport {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbDemo() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
separator | string | - | The separator prop for the component. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
flexitems-centergap-1.5text-smtext-muted-foregroundDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: gap-1.5. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page