Tile UI · SolidJS
CSR · SSR · SSGBreadcrumb
Accessible SolidJS breadcrumb navigation using native links.
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@tile-ui/solid';
export default function BreadcrumbDemo() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>Use Breadcrumb to expose the current page within a native navigation trail.
Registry install
pnpm dlx shadcn@latest add @tile-ui/breadcrumb
Package usage
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@tile-ui/solid';
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbPage>Solid</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
Highlights
- Native anchor composition
- Current-page semantics
- Custom separator content
Registry dependencies
| Item | Purpose |
|---|---|
breadcrumb |
Component source and module styles |
core |
Framework-agnostic logic helpers |
styles |
Shared SCSS tokens and globals |
API reference
Breadcrumb
No custom props.
BreadcrumbList
No custom props.
BreadcrumbItem
No custom props.
BreadcrumbLink
No custom props.
BreadcrumbPage
No custom props.
BreadcrumbSeparator
No custom props.
BreadcrumbEllipsis
No custom props.