1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root className="">
      <Breadcrumb.List
        className=""
        items={[
          { key: "home", label: "Home", href: "/" },
          { key: "components", label: "Components", current: true },
        ]}
        slotProps={{
          item: { className: "" },
          link: { className: "" },
        }}
        separator={<Breadcrumb.Separator className="" />}
      />
    </Breadcrumb.Root>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35

@layer components {
  [data-uiify-breadcrumb] [data-part="list"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  [data-uiify-breadcrumb] [data-part="item"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  [data-uiify-breadcrumb] [data-part="link"] {
    color: var(--primary);
    text-decoration: none;
  }

  [data-uiify-breadcrumb] [data-part="link"]:hover {
    text-decoration: underline;
  }

  [data-uiify-breadcrumb] [aria-hidden="true"] {
    color: var(--muted-foreground);
  }

  [data-uiify-breadcrumb] [data-current] {
    color: var(--foreground);
    font-weight: 600;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root className="">
      <Breadcrumb.List
        className="flex flex-wrap items-center [gap:0.5rem] list-none p-0 m-0"
        items={[
          { key: "home", label: "Home", href: "/" },
          { key: "components", label: "Components", current: true },
        ]}
        slotProps={{
          item: { className: "flex items-center [gap:0.5rem]" },
          link: {
            className:
              "text-primary no-underline hover:underline data-[current]:text-foreground " +
              "data-[current]:font-semibold",
          },
        }}
        separator={<Breadcrumb.Separator className="text-muted-foreground" />}
      />
    </Breadcrumb.Root>
  );
}