Tile UI · SolidJS

CSR · SSR · SSG

Breadcrumb

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

No custom props.

No custom props.

No custom props.

No custom props.

No custom props.

No custom props.

No custom props.