Breadcrumb

1'use client';
2
3import { Breadcrumb } from '@/components/ui/breadcrumb';
4
5const items = [
6  { label: 'Home', href: '/' },
7  { label: 'Documentation', href: '/docs' },
8  { label: 'Components', isPage: true },
9];
10
11export function Default() {
12  return (
13    <Breadcrumb>
14      <Breadcrumb.List>
15        {items.map((item, index) => (
16          <Breadcrumb.Item key={index}>
17            {item.isPage ? (
18              <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
19            ) : (
20              <Breadcrumb.Link href={item.href}>{item.label}</Breadcrumb.Link>
21            )}
22            {index < items.length - 1 && <Breadcrumb.Separator />}
23          </Breadcrumb.Item>
24        ))}
25      </Breadcrumb.List>
26    </Breadcrumb>
27  );
28}

1'use client';
2
3import { Breadcrumb } from '@/components/ui/breadcrumb';
4import { DropdownMenu } from '@/components/ui/dropdown-menu';
5
6export function Collapsed() {
7  return (
8    <Breadcrumb>
9      <Breadcrumb.List>
10        <Breadcrumb.Item>
11          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
12        </Breadcrumb.Item>
13        <Breadcrumb.Separator />
14        <Breadcrumb.Item>
15          <DropdownMenu>
16            <DropdownMenu.Trigger className="focus-visible:ring-ring flex items-center gap-1 focus-visible:ring-2 focus-visible:outline-none">
17              <Breadcrumb.Ellipsis className="h-4 w-4" />
18              <span className="sr-only">Toggle menu</span>
19            </DropdownMenu.Trigger>
20            <DropdownMenu.Content align="start">
21              <DropdownMenu.Item>Documentation</DropdownMenu.Item>
22              <DropdownMenu.Item>Themes</DropdownMenu.Item>
23              <DropdownMenu.Item>GitHub</DropdownMenu.Item>
24            </DropdownMenu.Content>
25          </DropdownMenu>
26        </Breadcrumb.Item>
27        <Breadcrumb.Separator />
28        <Breadcrumb.Item>
29          <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
30        </Breadcrumb.Item>
31        <Breadcrumb.Separator />
32        <Breadcrumb.Item>
33          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
34        </Breadcrumb.Item>
35      </Breadcrumb.List>
36    </Breadcrumb>
37  );
38}

1'use client';
2
3import { SlashIcon } from 'lucide-react';
4
5import { Breadcrumb } from '@/components/ui/breadcrumb';
6
7const crumbs = [
8  { label: 'Home', href: '/' },
9  { label: 'Components', href: '/components' },
10  { label: 'Breadcrumb', href: null },
11] as const;
12
13export function CustomSeparator() {
14  return (
15    <Breadcrumb>
16      <Breadcrumb.List>
17        {crumbs.map((crumb, index) => (
18          <Breadcrumb.Item key={crumb.label}>
19            {crumb.href ? (
20              <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
21            ) : (
22              <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
23            )}
24            {index < crumbs.length - 1 && (
25              <Breadcrumb.Separator>
26                <SlashIcon className="h-3.5 w-3.5" />
27              </Breadcrumb.Separator>
28            )}
29          </Breadcrumb.Item>
30        ))}
31      </Breadcrumb.List>
32    </Breadcrumb>
33  );
34}