Controls
Layout
Breadcrumb
Navigation trail primitives for docs and app pages.
Component
32
Import
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "@swirski/ui";Playground
Usage
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Docs</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator>/</BreadcrumbSeparator>
<BreadcrumbItem><BreadcrumbLink href="/components">Library</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator>/</BreadcrumbSeparator>
<BreadcrumbItem><BreadcrumbPage>Components</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
Breadcrumb.asChild | boolean | false | Generated from BreadcrumbProps. |
Breadcrumb.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbProps. |
Breadcrumb.tone | 'default' | 'muted' | "default" | Generated from BreadcrumbProps. |
Breadcrumb.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbProps. |
BreadcrumbList.asChild | boolean | false | Generated from BreadcrumbListProps. |
BreadcrumbList.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbListProps. |
BreadcrumbList.tone | 'default' | 'muted' | "default" | Generated from BreadcrumbListProps. |
BreadcrumbList.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbListProps. |
BreadcrumbItem.asChild | boolean | false | Generated from BreadcrumbItemProps. |
BreadcrumbItem.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbItemProps. |
BreadcrumbItem.tone | 'default' | 'muted' | "default" | Generated from BreadcrumbItemProps. |
BreadcrumbItem.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbItemProps. |
BreadcrumbLink.as | ElementType | - | Generated from BreadcrumbLinkProps. |
BreadcrumbLink.asChild | boolean | false | Generated from BreadcrumbLinkProps. |
BreadcrumbLink.children | ReactNode | - | Generated from BreadcrumbLinkProps. |
BreadcrumbLink.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbLinkProps. |
BreadcrumbLink.tone | 'default' | 'muted' | "default" | Generated from BreadcrumbLinkProps. |
BreadcrumbLink.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbLinkProps. |
BreadcrumbPage.asChild | boolean | false | Generated from BreadcrumbPageProps. |
BreadcrumbPage.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbPageProps. |
BreadcrumbPage.tone | 'default' | 'muted' | "muted" | Generated from BreadcrumbPageProps. |
BreadcrumbPage.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbPageProps. |
BreadcrumbSeparator.asChild | boolean | false | Generated from BreadcrumbSeparatorProps. |
BreadcrumbSeparator.children | ReactNode | "/" | Generated from BreadcrumbSeparatorProps. |
BreadcrumbSeparator.size | 'sm' | 'md' | "sm" | Generated from BreadcrumbSeparatorProps. |
BreadcrumbSeparator.tone | 'default' | 'muted' | "muted" | Generated from BreadcrumbSeparatorProps. |
BreadcrumbSeparator.variant | 'default' | 'plain' | "default" | Generated from BreadcrumbSeparatorProps. |
Breadcrumb | HTMLAttributes<HTMLElement> | - | Props forwarded to the nav. |
BreadcrumbLink | AnchorHTMLAttributes<HTMLAnchorElement> & { as?: ElementType } | - | Props forwarded to links. Use as to render framework links like Next.js Link. |
BreadcrumbPage | HTMLAttributes<HTMLSpanElement> | - | Current page item. |