Breadcrumbs

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/Breadcrumbs.tsx
'use client';
import { ChevronRight } from 'lucide-react';
import React from 'react';
import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, BreadcrumbProps, BreadcrumbsProps, LinkProps } from 'react-aria-components';
import { twMerge } from 'tailwind-merge';
import { Link } from '@/registry/react-aria/ui/Link';
import { composeTailwindRenderProps } from '@/registry/react-aria/lib/react-aria-utils';

export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
  return <AriaBreadcrumbs {...props} className={twMerge('flex gap-1', props.className)} />;
}

export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>) {
  return (
    <AriaBreadcrumb {...props} className={composeTailwindRenderProps(props.className, 'flex items-center gap-1')}>
      {({isCurrent}) => (<>
       <Link variant="secondary" {...props} />
        {!isCurrent && <ChevronRight className="w-3 h-3 text-neutral-600 dark:text-neutral-400" />}
      </>)}
    </AriaBreadcrumb>
  );
}

Installation

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

Usage

import { TailwindBreadcrumbs } from "@/components/ui/tailwind-breadcrumbs"
<TailwindBreadcrumbs />