breadcrumb

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/breadcrumb/Breadcrumb.astro directly.
3/**
4 * @component Breadcrumb
5 * @title Breadcrumb
6 * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3603&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Breadcrumb>
12 *   <BreadcrumbList>
13 *     <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
14 *     <BreadcrumbSeparator />
15 *     <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
16 *     <BreadcrumbSeparator />
17 *     <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
18 *   </BreadcrumbList>
19 * </Breadcrumb>
20 *
21 * @usage
22 *
23 * ```astro nocollapse
24 * ---
25 * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
26 * ---
27 *
28 * <Breadcrumb>
29 *   <BreadcrumbList>
30 *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
31 *     <BreadcrumbSeparator />
32 *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
33 *   </BreadcrumbList>
34 * </Breadcrumb>
35 * ```
36 *
37 * @examples
38 *
39 * ### Custom separator
40 *
41 *  <Breadcrumb>
42 *    <BreadcrumbList>
43 *       <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/">Home</a></BreadcrumbItem>
44 *       <BreadcrumbSeparator>
45 *         <SlashIcon />
46 *       </BreadcrumbSeparator>
47 *       <BreadcrumbItem><a class="hover:text-foreground transition-colors" href="/docs">Docs</a></BreadcrumbItem>
48 *       <BreadcrumbSeparator>
49 *         <SlashIcon />
50 *       </BreadcrumbSeparator>
51 *       <BreadcrumbItem><span class="text-foreground font-normal" aria-current="page">Page</span></BreadcrumbItem>
52 *   </BreadcrumbList>
53 * </Breadcrumb>
54 */
55 
56import { cn } from "@/lib/utils";
57import type { HTMLAttributes } from "astro/types";
58 
59interface Props extends HTMLAttributes<"nav"> {
60  class?: string;
61}
62 
63const {
64  class: className = "",
65  ...rest
66} = Astro.props as Props;
67---
68 
69<nav
70  {...rest}
71  aria-label="breadcrumb"
72  data-slot="breadcrumb"
73  class={cn("", className)}
74>
75  <slot />
76</nav>
77