Breadcrumb

1import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink } from "@/components/ui/breadcrumb";
2
3<Breadcrumb />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
5import type React from "react";
6import { cn } from "@/lib/utils";
7
8interface BreadcrumbProps extends React.ComponentProps<typeof ark.nav> {
9  /**
10   * Accessible label for the breadcrumb navigation landmark.
11   *
12   * @default "Breadcrumb"
13   */
14  "aria-label"?: string;
15}
16
17export const Breadcrumb = (props: BreadcrumbProps) => {
18  const { "aria-label": ariaLabel = "Breadcrumb", ...rest } = props;
19
20  return <ark.nav aria-label={ariaLabel} data-slot="breadcrumb" {...rest} />;
21};
22
23export const BreadcrumbList = (props: React.ComponentProps<typeof ark.ol>) => {
24  const { className, ...rest } = props;
25
26  return (
27    <ark.ol
28      className={cn(