Breadcrumb

1import { Fragment } from 'react';
2
3import { Breadcrumb } from '@/components/ui/breadcrumb';
4
5const crumbs = [
6  { label: 'Dashboard', href: '/dashboard' },
7  { label: 'Projects', href: '/dashboard/projects' },
8  { label: 'storefront-api', href: '/dashboard/projects/storefront-api' },
9  { label: 'Deployments', href: null },
10];
11
12export function Default() {
13  return (
14    <Breadcrumb>
15      <Breadcrumb.List>
16        {crumbs.map((crumb, index) => (
17          <Fragment key={crumb.label}>
18            <Breadcrumb.Item>
19              {crumb.href ? (
20                <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
21              ) : (
22                <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
23              )}
24            </Breadcrumb.Item>
25            {index < crumbs.length - 1 && <Breadcrumb.Separator />}
26          </Fragment>
27        ))}
28      </Breadcrumb.List>
29    </Breadcrumb>
30  );
31}

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="/dashboard">Dashboard</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">Show 2 hidden levels</span>
19            </DropdownMenu.Trigger>
20            <DropdownMenu.Content align="start">
21              <DropdownMenu.Item>Projects</DropdownMenu.Item>
22              <DropdownMenu.Item>storefront-api</DropdownMenu.Item>
23            </DropdownMenu.Content>
24          </DropdownMenu>
25        </Breadcrumb.Item>
26        <Breadcrumb.Separator />
27        <Breadcrumb.Item>
28          <Breadcrumb.Link href="/dashboard/projects/storefront-api/deployments">
29            Deployments
30          </Breadcrumb.Link>
31        </Breadcrumb.Item>
32        <Breadcrumb.Separator />
33        <Breadcrumb.Item>
34          <Breadcrumb.Page>dpl_9fk2ax</Breadcrumb.Page>
35        </Breadcrumb.Item>
36      </Breadcrumb.List>
37    </Breadcrumb>
38  );
39}

1import { Fragment } from 'react';
2
3import { Breadcrumb } from '@/components/ui/breadcrumb';
4
5const crumbs = [
6  { label: 'acme-studio', href: '/acme-studio' },
7  { label: 'storefront-api', href: '/acme-studio/storefront-api' },
8  { label: 'Settings', href: '/acme-studio/storefront-api/settings' },
9  { label: 'Environment Variables', href: null },
10] as const;
11
12export function CustomSeparator() {
13  return (
14    <Breadcrumb>
15      <Breadcrumb.List>
16        {crumbs.map((crumb, index) => (
17          <Fragment key={crumb.label}>
18            <Breadcrumb.Item>
19              {crumb.href ? (
20                <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
21              ) : (
22                <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
23              )}
24            </Breadcrumb.Item>
25            {index < crumbs.length - 1 && (
26              <Breadcrumb.Separator>
27                <span aria-hidden="true">/</span>
28              </Breadcrumb.Separator>
29            )}
30          </Fragment>
31        ))}
32      </Breadcrumb.List>
33    </Breadcrumb>
34  );
35}