## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/breadcrumbs
```
```bash
pnpm dlx shadcn@latest add @dotui/breadcrumbs
```
```bash
yarn dlx shadcn@latest add @dotui/breadcrumbs
```
```bash
bun x shadcn@latest add @dotui/breadcrumbs
```
## Usage [#usage]
Use breadcrumbs to display a hierarchy of links showing the user's location in a site or application.
```tsx
import {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
Breadcrumbs,
} from '@/components/ui/breadcrumbs'
```
```tsx
Home
Components
Breadcrumbs
```
## Framework Setup [#framework-setup]
By default, `BreadcrumbLink` renders a plain `` tag. To integrate with your framework's router, override the component in your project's `breadcrumbs.tsx`.
### Next.js [#nextjs]
```tsx title="ui/breadcrumbs.tsx"
import RouterLink from "next/link"; // [!code highlight]
// ..
const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
return (
{
"href" in domProps ? (
}
href={href}
{...domProps}
/>
) : (
} {...domProps} />
)
}
className={composeRenderProps(className, (className) =>
link({ className }),
)}
{...props}
/>
);
};
```
### TanStack Start [#tanstack-start]
```tsx title="ui/breadcrumbs.tsx"
// [!code highlight:2]
import { Link as RouterLink } from '@tanstack/react-router'
import type { ToOptions } from '@tanstack/react-router'
// ..
interface BreadcrumbLinkProps extends Omit<
React.ComponentProps,
'href'
> {
href?: string | ToOptions // [!code highlight]
}
const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
return (
{
if (typeof href === 'object') {
return (
}
{...href}
{...domProps}
/>
)
}
if (typeof href === 'string') {
return (
}
href={href}
{...domProps}
/>
)
}
return
}}
className={composeRenderProps(className, (className) =>
link({ className }),
)}
{...props}
/>
)
}
```
## Examples [#examples]
## API Reference [#api-reference]
### Breadcrumbs [#breadcrumbs]
### BreadcrumbItem [#breadcrumbitem]
### BreadcrumbLink [#breadcrumblink]
### BreadcrumbSeparator [#breadcrumbseparator]