Breadcrumbs

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

import { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from 'cwl-ui'
 
export function Default() {
  return (
    <Breadcrumbs className="text-lg">
      <BreadcrumbItem className="after:content-['›'] after:px-[5px] after:text-zinc-600">
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem className="after:content-['›'] after:px-[5px] after:text-zinc-600">
        <BreadcrumbLink href="/">Account</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Settings</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumbs>
  )
}

Component API

Prop	Default	Description
separator	`undefined`	An icon that separates individual breadcrumb links.

See React Aria Breadcrumbs for more details.

Examples

CSS Separator

Use psuedo elements to add separators between each breadcrumb.

import { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from 'cwl-ui'
 
export function Default() {
  return (
    <Breadcrumbs className="text-lg">
      <BreadcrumbItem className="after:content-['›'] after:px-[5px] after:text-zinc-600">
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem className="after:content-['›'] after:px-[5px] after:text-zinc-600">
        <BreadcrumbLink href="/">Account</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Settings</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumbs>
  )
}

Separator Prop

Set the separator prop to true to add a separator between each breadcrumb.

import { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from 'cwl-ui'
import { ChevronRight } from 'lucide-react'
 
export function Icons() {
  return (
    <Breadcrumbs className="text-lg">
      <BreadcrumbItem
        separator={
          <div aria-hidden="true" className="text-zinc-600">
            <ChevronRight size="0.8em" />
          </div>
        }
      >
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem
        separator={
          <div aria-hidden="true" className="text-zinc-600">
            <ChevronRight size="0.8em" />
          </div>
        }
      >
        <BreadcrumbLink href="/">Account</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Settings</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumbs>
  )
}

Installation

To install, copy the code below and paste into your project.

'use client'
 
import * as React from 'react'
 
import * as ReactAria from 'react-aria-components'
 
import { cx } from './lib/cva.config'
 
export const Breadcrumbs = <T extends object>({
  className,
  ...props
}: ReactAria.BreadcrumbsProps<T>) => {
  return <ReactAria.Breadcrumbs className={cx('flex flex-wrap gap-1', className)} {...props} />
}
 
export interface BreadcrumbItemProps extends ReactAria.BreadcrumbProps {
  separator?: React.ReactNode
}
 
export const BreadcrumbItem = ({ separator, children, ...props }: BreadcrumbItemProps) => {
  return (
    <ReactAria.Breadcrumb className="flex items-center gap-1" {...props}>
      {children}
      {separator ? (
        <div aria-hidden="true" className="text-zinc-700">
          {separator}
        </div>
      ) : null}
    </ReactAria.Breadcrumb>
  )
}
 
export const BreadcrumbLink = ({ children, className, ...props }: ReactAria.LinkProps) => {
  return (
    <ReactAria.Link
      className={cx(
        'text-zinc-600 hover:underline current:text-zinc-950 current:hover:no-underline',
        className,
      )}
      {...props}
    >
      {children}
    </ReactAria.Link>
  )
}