Breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

basic.tsx

import { Breadcrumbs, Breadcrumb } from "@/lib/components/core/default/breadcrumbs";

function Demo() {
  return (
    <Breadcrumbs>
      <Breadcrumb href="#">Home</Breadcrumb>
      <Breadcrumb href="#">Components</Breadcrumb>
      <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
    </Breadcrumbs>
  );
}

Installation

Install the following dependencies:

npm install react-aria-components

Copy and paste the following code into your project.

breadcrumbs.tsx

"use client";

import {
  Link as AriaLink,
  Breadcrumbs as AriaBreadcrumbs,
  Breadcrumb as AriaBreadcrumb,
  type BreadcrumbsProps as AriaBreadcrumbsProps,
  type BreadcrumbProps as AriaBreadcrumbProps,
  type LinkProps as AriaLinkProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { ChevronRightIcon } from "@/lib/icons";
import { cn } from "@/lib/utils/classes";

const breadcrumbsStyles = tv({
  slots: {
    root: "flex flex-wrap items-center gap-1.5 break-words text-sm text-fg-muted [&_svg]:size-4",
    item: "inline-flex items-center gap-1.5 [&_svg]:last:hidden",
    link: "inline-flex items-center gap-1.5 hover:text-fg transition-colors current:text-fg disabled:[&:not([data-current])]:text-fg-disabled disabled:cursor-default",
  },
});

type BreadcrumbsProps<T extends object> = AriaBreadcrumbsProps<T>;

const Breadcrumbs = <T extends object>({ className, ...props }: BreadcrumbsProps<T>) => {
  const { root } = breadcrumbsStyles();
  return <AriaBreadcrumbs {...props} className={root({ className })} />;
};

type BreadcrumbProps = Omit<AriaBreadcrumbProps, "children"> &
  Omit<AriaLinkProps, "className" | "style"> & { icon?: React.ReactNode };
const Breadcrumb = ({ children, className, style, icon = null, ...props }: BreadcrumbProps) => {
  return (
    <BreadcrumbItem className={className} style={style} {...props}>
      {icon}
      <BreadcrumbLink {...props}>{children}</BreadcrumbLink>
      <ChevronRightIcon />
    </BreadcrumbItem>
  );
};

type BreadcrumbItemProps = AriaBreadcrumbProps;
const BreadcrumbItem = ({ className, ...props }: BreadcrumbItemProps) => {
  const { item } = breadcrumbsStyles();
  return <AriaBreadcrumb {...props} className={cn(item({ className }))} />;
};

interface BreadcrumbLinkProps extends Omit<AriaLinkProps, "className"> {
  className?: string;
}
const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
  const { link } = breadcrumbsStyles();
  return <AriaLink {...props} className={link({ className })} />;
};

export type { BreadcrumbsProps, BreadcrumbProps, BreadcrumbItemProps, BreadcrumbLinkProps };
export { Breadcrumbs, Breadcrumb, BreadcrumbItem, BreadcrumbLink };

Update the import paths to match your project setup.

Usage

Use breadcrumbs to display a hierarchy of links to the current page or resource in an application.

Options

Disabled

Use the isDisabled prop to disable the breadcrumbs.

disabled.tsx

import { Breadcrumbs, Breadcrumb } from "@/lib/components/core/default/breadcrumbs";

function Demo() {
  return (
    <Breadcrumbs isDisabled>
      <Breadcrumb href="#">Home</Breadcrumb>
      <Breadcrumb href="#">Components</Breadcrumb>
      <Breadcrumb>Breadcrumbs</Breadcrumb>
    </Breadcrumbs>
  );
}

Composition

If you need to customize things further, you can drop down to the composition level.

composition.tsx

import {
  Breadcrumbs,
  BreadcrumbItem,
  BreadcrumbLink,
} from "@/lib/components/core/default/breadcrumbs";
import { ChevronRightSquareIcon } from "@/lib/icons";

function Demo() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
        <ChevronRightSquareIcon />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <ChevronRightSquareIcon />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
        <ChevronRightSquareIcon />
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

Examples

Icon

icon.tsx

import { Breadcrumbs, Breadcrumb } from "@/lib/components/core/default/breadcrumbs";
import { HomeIcon } from "@/lib/icons";

function Demo() {
  return (
    <Breadcrumbs>
      <Breadcrumb href="#">
        <HomeIcon />
        Home
      </Breadcrumb>
      <Breadcrumb href="#">Components</Breadcrumb>
      <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
    </Breadcrumbs>
  );
}

Router integration

router-integration.tsx

"use client";

import { usePathname } from "next/navigation";
import { Breadcrumbs, Breadcrumb } from "@/lib/components/core/default/breadcrumbs";

function Demo() {
  const pathname = usePathname();
  const pathnames = pathname.split("/").filter((x) => x);
  return (
    <Breadcrumbs>
      {pathnames.map((elem, index) => {
        const href = `/${pathnames.slice(0, index + 1).join("/")}`;
        return (
          <Breadcrumb key={elem} href={href} className="capitalize">
            {elem}
          </Breadcrumb>
        );
      })}
    </Breadcrumbs>
  );
}

API Reference

Breadcrumbs

Prop	Type	Default	Description
isDisabled	boolean	-	Whether the breadcrumbs are disabled.
items	boolean	-	Item objects in the collection.
dependencies	boolean	-	Values that should invalidate the item cache when using dynamic collections.
children	ReactNode \| (item: T) => ReactNode	-	The contents of the collection.
className	string	-	The CSS className for the element.
style	CSSProperties	-	The inline style for the element.

Event	Type	Description
onAction	(key: Key) => void	Handler that is called when a breadcrumb is clicked.

Prop	Type	Default	Description
id	boolean	-	A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.
isDisabled	boolean	-	Whether the link is disabled.
autoFocus	boolean	-	Whether the element should receive focus on render.
href	Href	-	A URL to link to.
hrefLang	string	-	Hints at the human language of the linked URL.
target	HTMLAttributeAnchorTarget	-	The target window for the link.
rel	string	-	The relationship between the linked resource and the current page.
download	boolean \| string	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name.
ping	string	-	A space-separated list of URLs to ping when the link is followed.
referrerPolicy	HTMLAttributeReferrerPolicy	-	How much of the referrer to send when following the link.
routerOptions	RouterOptions	-	Options for the configured client side router.
children	ReactNode \| (values: LinkRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
className	string	-	The CSS className for the element.
style	CSSProperties	-	The inline style for the element.

Event	Type	Description
onAction	(key: Key) => void	Handler that is called when a breadcrumb is clicked.

Data attribute	Description
[data-disabled]	Whether the color field is disabled.
[data-invalid]	Whether the color field is invalid.
[data-channel="hex \| hue \| saturation \| ..."]	The color channel that this field edits, or "hex" if no channel prop is set.

Getting Started

Components

Buttons

Inputs

Menus and Selection

Dates

Colors

Drag and drop

Feedback

Layout

Data display

Navigation

Overlay

Hooks

Breadcrumbs

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Options

Disabled

Composition

Examples

Icon

Router integration

API Reference

Product

Community

Support