Breadcrumbs

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/Breadcrumbs.tsx
'use client';
import {Breadcrumbs as RACBreadcrumbs, BreadcrumbsProps, Breadcrumb as RACBreadcrumb, BreadcrumbProps, LinkProps, Link} from 'react-aria-components';
import {ChevronRight} from 'lucide-react';
import './Breadcrumbs.css';

export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
  return <RACBreadcrumbs {...props} />;
}

export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>) {
  return (
    <RACBreadcrumb {...props}>
      {({isCurrent}) => (<>
        <Link {...props} />
        {!isCurrent && <ChevronRight size={14} />}
      </>)}
    </RACBreadcrumb>
  );
}

Installation

npx shadcn@latest add @react-aria/css-breadcrumbs

Usage

import { CssBreadcrumbs } from "@/components/ui/css-breadcrumbs"
<CssBreadcrumbs />