Tile UI React
Source code

Components

Breadcrumb

Navigation breadcrumb primitives.

Use Breadcrumb to show the current location in a hierarchy.

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@tile-ui/react';

export default function BreadcrumbDemo() {
	return (
		<Breadcrumb>
			<BreadcrumbList>

Registry install

pnpm dlx shadcn@latest add @tile-ui/breadcrumb

Package usage

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@tile-ui/react';
 
<Breadcrumb>
	<BreadcrumbList>
		<BreadcrumbItem>
			<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
		</BreadcrumbItem>
		<BreadcrumbSeparator />
		<BreadcrumbItem>
			<BreadcrumbPage>Button</BreadcrumbPage>
		</BreadcrumbItem>
	</BreadcrumbList>
</Breadcrumb>

Highlights

  • List, item, link, and page
  • Separator and ellipsis
  • asChild on links

Registry dependencies

ItemPurpose
breadcrumbComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

No custom props.

No custom props.

No custom props.

PropTypeDefault
asChildboolean—

No custom props.

No custom props.

No custom props.

PreviousBadgeNextBubble