Breadcrumb

1'use client';
2
3import { Breadcrumb } from '@/components/ui/breadcrumb';
4
5export function Default() {
6  return (
7    <Breadcrumb>
8      <Breadcrumb.List>
9        <Breadcrumb.Item>
10          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
11        </Breadcrumb.Item>
12        <Breadcrumb.Separator />
13        <Breadcrumb.Item>
14          <Breadcrumb.Link href="/docs">Documentation</Breadcrumb.Link>
15        </Breadcrumb.Item>
16        <Breadcrumb.Separator />
17        <Breadcrumb.Item>
18          <Breadcrumb.Page>Components</Breadcrumb.Page>
19        </Breadcrumb.Item>
20      </Breadcrumb.List>
21    </Breadcrumb>
22  );
23}

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';
4import { Breadcrumb } from '@/components/ui/breadcrumb';
5
6export function CustomSeparator() {
7  return (
8    <Breadcrumb>
9      <Breadcrumb.List>
10        <Breadcrumb.Item>
11          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
12        </Breadcrumb.Item>
13        <Breadcrumb.Separator>
14          <SlashIcon className="h-3.5 w-3.5" />
15        </Breadcrumb.Separator>
16        <Breadcrumb.Item>
17          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
18        </Breadcrumb.Item>
19        <Breadcrumb.Separator>
20          <SlashIcon className="h-3.5 w-3.5" />
21        </Breadcrumb.Separator>
22        <Breadcrumb.Item>
23          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
24        </Breadcrumb.Item>
25      </Breadcrumb.List>
26    </Breadcrumb>
27  );
28}