rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-07 22:18:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add breadcrumb

Browse Source
This commit is contained in:
shadcn
2026-01-14 20:46:23 +04:00
parent 953107e7f9
commit be0b798e21
16 changed files with 157 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/v4/app/(app)/llm/[[...slug]]/route.ts
View File

@@ -3,7 +3,7 @@ import { NextResponse, type NextRequest } from "next/server"
import { processMdxForLLMs } from "@/lib/llm"
import { source } from "@/lib/source"
import { getActiveStyle } from "@/registry/_legacy-styles"
import { getActiveStyle, type Style } from "@/registry/_legacy-styles"
export const revalidate = false
@@ -36,7 +36,7 @@ export async function GET(
const processedContent = processMdxForLLMs(
await page.data.getText("raw"),
effectiveStyle
effectiveStyle as Style["name"]
)
return new NextResponse(processedContent, {

188
apps/v4/content/docs/components/base/breadcrumb.mdx
View File

@@ -5,12 +5,7 @@ base: base
component: true
---
<ComponentPreview
styleName="base-nova"
name="breadcrumb-demo"
className="[&_.preview]:p-2"
description="A breadcrumb with a collapsible dropdown."
/>
<ComponentPreview name="breadcrumb-demo" previewClassName="p-2" />
## Installation
@@ -65,11 +60,13 @@ import {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
<BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
<BreadcrumbLink render={<a href="/components" />}>
Components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
@@ -81,142 +78,91 @@ import {
## Examples
### Basic
A basic breadcrumb with a home link and a components link.
<ComponentPreview name="breadcrumb-basic" />
### Custom separator
Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
<ComponentPreview
styleName="base-nova"
name="breadcrumb-separator"
description="A breadcrumb with a custom separator"
/>
```tsx showLineNumbers {1,10-12}
import { SlashIcon } from "lucide-react"
...
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
```
---
<ComponentPreview name="breadcrumb-separator" />
### Dropdown
You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
<ComponentPreview
styleName="base-nova"
name="breadcrumb-dropdown"
className="[&_.preview]:p-2"
description="A breadcrumb with a dropdown."
/>
```tsx showLineNumbers {1-6,11-21}
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
...
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger>
Components
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
```
---
<ComponentPreview name="breadcrumb-dropdown" />
### Collapsed
We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
<ComponentPreview
styleName="base-nova"
name="breadcrumb-ellipsis"
className="[&_.preview]:p-2"
description="A breadcrumb showing a collapsed state."
/>
```tsx showLineNumbers {1,9}
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
...
<Breadcrumb>
<BreadcrumbList>
{/* ... */}
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
{/* ... */}
</BreadcrumbList>
</Breadcrumb>
```
---
<ComponentPreview name="breadcrumb-ellipsis" />
### Link component
To use a custom link component from your routing library, you can use the `asChild` prop on `<BreadcrumbLink />`.
To use a custom link component from your routing library, you can use the `render` prop on `<BreadcrumbLink />`.
<ComponentPreview
styleName="base-nova"
name="breadcrumb-link"
description="A breadcrumb with a custom Link component"
/>
<ComponentPreview name="breadcrumb-link" />
```tsx showLineNumbers {1,8-10}
import Link from "next/link"
## API Reference
...
### Breadcrumb
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{/* ... */}
</BreadcrumbList>
</Breadcrumb>
```
The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components.
---
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### Responsive
### BreadcrumbList
Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, `<DropdownMenu />`, and `<Drawer />`.
The `BreadcrumbList` component displays the ordered list of breadcrumb items.
It displays a dropdown on desktop and a drawer on mobile.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
<ComponentPreview
styleName="base-nova"
name="breadcrumb-responsive"
className="[&_.preview]:p-2"
description="A responsive breadcrumb. It displays a dropdown on desktop and a drawer on mobile."
/>
### BreadcrumbItem
The `BreadcrumbItem` component wraps individual breadcrumb items.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbLink
The `BreadcrumbLink` component displays a clickable link in the breadcrumb.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbPage
The `BreadcrumbPage` component displays the current page in the breadcrumb (non-clickable).
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbSeparator
The `BreadcrumbSeparator` component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.
| Prop | Type | Default |
| ----------- | ----------------- | ------- |
| `children` | `React.ReactNode` | - |
| `className` | `string` | - |
### BreadcrumbEllipsis
The `BreadcrumbEllipsis` component displays an ellipsis indicator for collapsed breadcrumb items.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |

181
apps/v4/content/docs/components/radix/breadcrumb.mdx
View File

@@ -5,12 +5,7 @@ base: radix
component: true
---
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-demo"
className="[&_.preview]:p-2"
description="A breadcrumb with a collapsible dropdown."
/>
<ComponentPreview name="breadcrumb-demo" previewClassName="p-2" />
## Installation
@@ -37,7 +32,6 @@ npx shadcn@latest add breadcrumb
<ComponentSource
name="breadcrumb"
title="components/ui/breadcrumb.tsx"
styleName="radix-nova"
/>
<Step>Update the import paths to match your project setup.</Step>
@@ -81,142 +75,91 @@ import {
## Examples
### Basic
A basic breadcrumb with a home link and a components link.
<ComponentPreview name="breadcrumb-basic" />
### Custom separator
Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-separator"
description="A breadcrumb with a custom separator"
/>
```tsx showLineNumbers {1,10-12}
import { SlashIcon } from "lucide-react"
...
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
```
---
<ComponentPreview name="breadcrumb-separator" />
### Dropdown
You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-dropdown"
className="[&_.preview]:p-2"
description="A breadcrumb with a dropdown."
/>
```tsx showLineNumbers {1-6,11-21}
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
...
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger>
Components
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
```
---
<ComponentPreview name="breadcrumb-dropdown" />
### Collapsed
We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-ellipsis"
className="[&_.preview]:p-2"
description="A breadcrumb showing a collapsed state."
/>
```tsx showLineNumbers {1,9}
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
...
<Breadcrumb>
<BreadcrumbList>
{/* ... */}
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
{/* ... */}
</BreadcrumbList>
</Breadcrumb>
```
---
<ComponentPreview name="breadcrumb-ellipsis" />
### Link component
To use a custom link component from your routing library, you can use the `asChild` prop on `<BreadcrumbLink />`.
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-link"
description="A breadcrumb with a custom Link component"
/>
<ComponentPreview name="breadcrumb-link" />
```tsx showLineNumbers {1,8-10}
import Link from "next/link"
## API Reference
...
### Breadcrumb
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{/* ... */}
</BreadcrumbList>
</Breadcrumb>
```
The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components.
---
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### Responsive
### BreadcrumbList
Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, `<DropdownMenu />`, and `<Drawer />`.
The `BreadcrumbList` component displays the ordered list of breadcrumb items.
It displays a dropdown on desktop and a drawer on mobile.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-responsive"
className="[&_.preview]:p-2"
description="A responsive breadcrumb. It displays a dropdown on desktop and a drawer on mobile."
/>
### BreadcrumbItem
The `BreadcrumbItem` component wraps individual breadcrumb items.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbLink
The `BreadcrumbLink` component displays a clickable link in the breadcrumb.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbPage
The `BreadcrumbPage` component displays the current page in the breadcrumb (non-clickable).
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |
### BreadcrumbSeparator
The `BreadcrumbSeparator` component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.
| Prop | Type | Default |
| ----------- | ----------------- | ------- |
| `children` | `React.ReactNode` | - |
| `className` | `string` | - |
### BreadcrumbEllipsis
The `BreadcrumbEllipsis` component displays an ellipsis indicator for collapsed breadcrumb items.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | - |

78
apps/v4/examples/__index__.tsx
View File

@@ -525,19 +525,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-responsive": {
name: "breadcrumb-responsive",
filePath: "examples/radix/breadcrumb-responsive.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/breadcrumb-responsive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-responsive"
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-separator": {
name: "breadcrumb-separator",
filePath: "examples/radix/breadcrumb-separator.tsx",
@@ -551,32 +538,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-with-dropdown": {
name: "breadcrumb-with-dropdown",
filePath: "examples/radix/breadcrumb-with-dropdown.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/breadcrumb-with-dropdown")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-with-dropdown"
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-with-link": {
name: "breadcrumb-with-link",
filePath: "examples/radix/breadcrumb-with-link.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/breadcrumb-with-link")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-with-link"
return { default: mod.default || mod[exportName] }
}),
},
"button-as-child": {
name: "button-as-child",
filePath: "examples/radix/button-as-child.tsx",
@@ -7679,19 +7640,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-responsive": {
name: "breadcrumb-responsive",
filePath: "examples/base/breadcrumb-responsive.tsx",
component: React.lazy(async () => {
const mod = await import("./base/breadcrumb-responsive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-responsive"
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-separator": {
name: "breadcrumb-separator",
filePath: "examples/base/breadcrumb-separator.tsx",
@@ -7705,32 +7653,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-with-dropdown": {
name: "breadcrumb-with-dropdown",
filePath: "examples/base/breadcrumb-with-dropdown.tsx",
component: React.lazy(async () => {
const mod = await import("./base/breadcrumb-with-dropdown")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-with-dropdown"
return { default: mod.default || mod[exportName] }
}),
},
"breadcrumb-with-link": {
name: "breadcrumb-with-link",
filePath: "examples/base/breadcrumb-with-link.tsx",
component: React.lazy(async () => {
const mod = await import("./base/breadcrumb-with-link")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "breadcrumb-with-link"
return { default: mod.default || mod[exportName] }
}),
},
"button-as-child": {
name: "button-as-child",
filePath: "examples/base/button-as-child.tsx",

11
apps/v4/examples/base/breadcrumb-demo.tsx
View File

@@ -8,6 +8,7 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/base/ui/breadcrumb"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
@@ -21,12 +22,14 @@ export function BreadcrumbDemo() {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
<BreadcrumbLink render={<a href="#" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<DropdownMenuTrigger
render={<Button size="icon-sm" variant="ghost" />}
>
<BreadcrumbEllipsis className="size-4" />
<span className="sr-only">Toggle menu</span>
</DropdownMenuTrigger>
@@ -41,9 +44,7 @@ export function BreadcrumbDemo() {
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/docs/components" />}>
Components
</BreadcrumbLink>
<BreadcrumbLink render={<a href="#" />}>Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>

12
apps/v4/examples/base/breadcrumb-dropdown.tsx
View File

@@ -14,7 +14,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { ChevronDownIcon, SlashIcon } from "lucide-react"
import { ChevronDownIcon, DotIcon } from "lucide-react"
export function BreadcrumbDropdown() {
return (
@@ -24,13 +24,15 @@ export function BreadcrumbDropdown() {
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5">
<DropdownMenuTrigger
render={<button className="flex items-center gap-1" />}
>
Components
<ChevronDownIcon />
<ChevronDownIcon data-icon="inline-end" className="size-3.5" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
@@ -42,7 +44,7 @@ export function BreadcrumbDropdown() {
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

6
apps/v4/examples/base/breadcrumb-link.tsx
View File

@@ -13,11 +13,13 @@ export function BreadcrumbLinkDemo() {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
<BreadcrumbLink render={<Link href="#link-component" />}>
Home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/components" />}>
<BreadcrumbLink render={<Link href="#link-component" />}>
Components
</BreadcrumbLink>
</BreadcrumbItem>

139
apps/v4/examples/base/breadcrumb-responsive.tsx
View File

@@ -1,139 +0,0 @@
"use client"
import * as React from "react"
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/base/ui/breadcrumb"
import { Button } from "@/examples/base/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/examples/base/ui/drawer"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { useMediaQuery } from "@/hooks/use-media-query"
const items = [
{ href: "#", label: "Home" },
{ href: "#", label: "Documentation" },
{ href: "#", label: "Building Your Application" },
{ href: "#", label: "Data Fetching" },
{ label: "Caching and Revalidating" },
]
const ITEMS_TO_DISPLAY = 3
export function BreadcrumbResponsive() {
const [open, setOpen] = React.useState(false)
const isDesktop = useMediaQuery("(min-width: 768px)")
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href={items[0].href ?? "/"} />}>
{items[0].label}
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
{items.length > ITEMS_TO_DISPLAY ? (
<>
<BreadcrumbItem>
{isDesktop ? (
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger
className="flex items-center gap-1"
aria-label="Toggle menu"
>
<BreadcrumbEllipsis className="size-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
{items.slice(1, -2).map((item, index) => (
<DropdownMenuItem key={index}>
<Link href={item.href ? item.href : "#"}>
{item.label}
</Link>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger aria-label="Toggle Menu">
<BreadcrumbEllipsis className="h-4 w-4" />
</DrawerTrigger>
<DrawerContent>
<DrawerHeader className="text-left">
<DrawerTitle>Navigate to</DrawerTitle>
<DrawerDescription>
Select a page to navigate to.
</DrawerDescription>
</DrawerHeader>
<div className="grid gap-1 px-4">
{items.slice(1, -2).map((item, index) => (
<Link
key={index}
href={item.href ? item.href : "#"}
className="py-1 text-sm"
>
{item.label}
</Link>
))}
</div>
<DrawerFooter className="pt-4">
<DrawerClose asChild>
<Button variant="outline">Close</Button>
Close
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
)}
</BreadcrumbItem>
<BreadcrumbSeparator />
</>
) : null}
{items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
<BreadcrumbItem key={index}>
{item.href ? (
<>
<BreadcrumbLink
render={<Link href={item.href} />}
className="max-w-20 truncate md:max-w-none"
>
{item.label}
</BreadcrumbLink>
<BreadcrumbSeparator />
</>
) : (
<BreadcrumbPage className="max-w-20 truncate md:max-w-none">
{item.label}
</BreadcrumbPage>
)}
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
)
}

6
apps/v4/examples/base/breadcrumb-separator.tsx
View File

@@ -7,7 +7,7 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/base/ui/breadcrumb"
import { SlashIcon } from "lucide-react"
import { DotIcon } from "lucide-react"
export function BreadcrumbSeparatorDemo() {
return (
@@ -17,7 +17,7 @@ export function BreadcrumbSeparatorDemo() {
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/components" />}>
@@ -25,7 +25,7 @@ export function BreadcrumbSeparatorDemo() {
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

52
apps/v4/examples/base/breadcrumb-with-dropdown.tsx
View File

@@ -1,52 +0,0 @@
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/base/ui/breadcrumb"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
export function BreadcrumbWithDropdown() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button size="icon-sm" variant="ghost" />}
>
<BreadcrumbEllipsis />
<span className="sr-only">Toggle menu</span>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}

34
apps/v4/examples/base/breadcrumb-with-link.tsx
View File

@@ -1,34 +0,0 @@
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/base/ui/breadcrumb"
export function BreadcrumbWithLink() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="#">Home</Link>} />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="#">Components</Link>} />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}

6
apps/v4/examples/radix/breadcrumb-dropdown.tsx
View File

@@ -14,7 +14,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { ChevronDownIcon, SlashIcon } from "lucide-react"
import { ChevronDownIcon, DotIcon } from "lucide-react"
export function BreadcrumbDropdown() {
return (
@@ -26,7 +26,7 @@ export function BreadcrumbDropdown() {
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<DropdownMenu>
@@ -44,7 +44,7 @@ export function BreadcrumbDropdown() {
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

138
apps/v4/examples/radix/breadcrumb-responsive.tsx
View File

@@ -1,138 +0,0 @@
"use client"
import * as React from "react"
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/radix/ui/breadcrumb"
import { Button } from "@/examples/radix/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/examples/radix/ui/drawer"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { useMediaQuery } from "@/hooks/use-media-query"
const items = [
{ href: "#", label: "Home" },
{ href: "#", label: "Documentation" },
{ href: "#", label: "Building Your Application" },
{ href: "#", label: "Data Fetching" },
{ label: "Caching and Revalidating" },
]
const ITEMS_TO_DISPLAY = 3
export function BreadcrumbResponsive() {
const [open, setOpen] = React.useState(false)
const isDesktop = useMediaQuery("(min-width: 768px)")
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href={items[0].href ?? "/"}>{items[0].label}</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
{items.length > ITEMS_TO_DISPLAY ? (
<>
<BreadcrumbItem>
{isDesktop ? (
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger
className="flex items-center gap-1"
aria-label="Toggle menu"
>
<BreadcrumbEllipsis className="size-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
{items.slice(1, -2).map((item, index) => (
<DropdownMenuItem key={index}>
<Link href={item.href ? item.href : "#"}>
{item.label}
</Link>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger aria-label="Toggle Menu">
<BreadcrumbEllipsis className="h-4 w-4" />
</DrawerTrigger>
<DrawerContent>
<DrawerHeader className="text-left">
<DrawerTitle>Navigate to</DrawerTitle>
<DrawerDescription>
Select a page to navigate to.
</DrawerDescription>
</DrawerHeader>
<div className="grid gap-1 px-4">
{items.slice(1, -2).map((item, index) => (
<Link
key={index}
href={item.href ? item.href : "#"}
className="py-1 text-sm"
>
{item.label}
</Link>
))}
</div>
<DrawerFooter className="pt-4">
<DrawerClose asChild>
<Button variant="outline">Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
)}
</BreadcrumbItem>
<BreadcrumbSeparator />
</>
) : null}
{items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
<BreadcrumbItem key={index}>
{item.href ? (
<>
<BreadcrumbLink
asChild
className="max-w-20 truncate md:max-w-none"
>
<Link href={item.href}>{item.label}</Link>
</BreadcrumbLink>
<BreadcrumbSeparator />
</>
) : (
<BreadcrumbPage className="max-w-20 truncate md:max-w-none">
{item.label}
</BreadcrumbPage>
)}
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
)
}

6
apps/v4/examples/radix/breadcrumb-separator.tsx
View File

@@ -7,7 +7,7 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/radix/ui/breadcrumb"
import { SlashIcon } from "lucide-react"
import { DotIcon } from "lucide-react"
export function BreadcrumbSeparatorDemo() {
return (
@@ -19,7 +19,7 @@ export function BreadcrumbSeparatorDemo() {
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink asChild>
@@ -27,7 +27,7 @@ export function BreadcrumbSeparatorDemo() {
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<SlashIcon />
<DotIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

52
apps/v4/examples/radix/breadcrumb-with-dropdown.tsx
View File

@@ -1,52 +0,0 @@
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/radix/ui/breadcrumb"
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
export function BreadcrumbWithDropdown() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon-sm" variant="ghost">
<BreadcrumbEllipsis />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Documentation</DropdownMenuItem>
<DropdownMenuItem>Themes</DropdownMenuItem>
<DropdownMenuItem>GitHub</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}

38
apps/v4/examples/radix/breadcrumb-with-link.tsx
View File

@@ -1,38 +0,0 @@
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/examples/radix/ui/breadcrumb"
export function BreadcrumbWithLink() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Components</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}