Breadcrumb
Preview Breadcrumb, copy setup snippets, review examples, and inspect API exports for @tuturuuu/ui/breadcrumb.
Preview
A contained preview using the same shared primitive exported by the package.
Installation
Install the shared UI package, import global styles once, then import the component from its public subpath.
bun add @tuturuuu/uiimport '@tuturuuu/ui/globals.css';import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink } from '@tuturuuu/ui/breadcrumb';Usage
Copy the default usage snippet and adapt labels, state, and event handlers to the product surface.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@tuturuuu/ui/breadcrumb';
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Examples
Examples reuse the registry snippets so the docs stay aligned with the component catalog.
Default
A minimal implementation using the current registry snippet.
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@tuturuuu/ui/breadcrumb';
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Composition
Use the grouped exports when the primitive has slots, triggers, content regions, or providers.
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
} from '@tuturuuu/ui/breadcrumb';Package import
Import through the public package path so workspace and external apps share the same contract.
// Public package import
import { Breadcrumb } from '@tuturuuu/ui/breadcrumb';
// Workspace apps should keep importing through the package boundary.API reference
The public exports currently available from this component entry.
| Name | Kind | Description |
|---|---|---|
Breadcrumb | Component | Breadcrumb is exported from @tuturuuu/ui/breadcrumb. Inspect the source for component-specific props and composition details. |
BreadcrumbList | Component | BreadcrumbList is exported from @tuturuuu/ui/breadcrumb. Inspect the source for component-specific props and composition details. |
BreadcrumbItem | Component | BreadcrumbItem is exported from @tuturuuu/ui/breadcrumb. Inspect the source for component-specific props and composition details. |
BreadcrumbLink | Component | BreadcrumbLink is exported from @tuturuuu/ui/breadcrumb. Inspect the source for component-specific props and composition details. |
Customization
Common props, states, and composition points to review before using this component.
