Skip to main content

dotUI

Breadcrumbs

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

On this page
  1. Home
  2. Components
  3. Breadcrumbs
Props
<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Components</BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumbs>

Installation

npx shadcn@latest add @dotui/breadcrumbs

Usage

Use breadcrumbs to display a hierarchy of links showing the user's location in a site or application.

import {
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  Breadcrumbs,
} from '@/components/ui/breadcrumbs'
<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Components</BreadcrumbLink>
    <BreadcrumbSeparator />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumbs>

Framework Setup

By default, BreadcrumbLink renders a plain <a> tag. To integrate with your framework's router, override the component in your project's breadcrumbs.tsx.

Next.js

TypeScript
ui/breadcrumbs.tsx
import RouterLink from "next/link"; 

// ..

const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
  return (
    <AriaLink
      render={({ ref, href, ...domProps }) => {
        "href" in domProps ? (
          <RouterLink
            ref={ref as React.Ref<HTMLAnchorElement>}
            href={href}
            {...domProps}
          />
        ) : (
          <span ref={ref as React.Ref<HTMLSpanElement>} {...domProps} />
        )
      }
      className={composeRenderProps(className, (className) =>
        link({ className }),
      )}
      {...props}
    />
  );
};

TanStack Start

TypeScript
ui/breadcrumbs.tsx
import { Link as RouterLink } from '@tanstack/react-router'
import type { ToOptions } from '@tanstack/react-router'

// ..

interface BreadcrumbLinkProps extends Omit<
  React.ComponentProps<typeof AriaLink>,
  'href'
> {
  href?: string | ToOptions
}
const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
  return (
    <AriaLink
      href={typeof href === 'object' ? href.to : href}
      render={({ ref, ...domProps }) => {
        if (typeof href === 'object') {
          return (
            <RouterLink
              ref={ref as React.Ref<HTMLAnchorElement>}
              {...href}
              {...domProps}
            />
          )
        }
        if (typeof href === 'string') {
          return (
            <a
              ref={ref as React.Ref<HTMLAnchorElement>}
              href={href}
              {...domProps}
            />
          )
        }
        return <span ref={ref} {...domProps} />
      }}
      className={composeRenderProps(className, (className) =>
        link({ className }),
      )}
      {...props}
    />
  )
}

Examples

With Menu

  1. Home
  3. Breadcrumbs

Custom Separator

  1. Home
  2. Components
  3. Breadcrumbs

API Reference

Breadcrumbs

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

PropType
boolean
ReactNode | function
Iterable<T>
readonly any[]

BreadcrumbItem

A Breadcrumb represents an individual item in a Breadcrumbs list.

PropType
ReactNode | function
Key

BreadcrumbLink

A link allows a user to navigate to another page or resource within a web page or application.

PropType
ReactNode | function
boolean

BreadcrumbSeparator

A separator visually divides breadcrumb items.

Supports all span attributes.

PropType

Last updated on 6/16/2026