Breadcrumbs

Import

tsx

import { Breadcrumbs } from '@heroui/react';

Usage

Anatomy

Import the Breadcrumbs component and access all parts using dot notation.

tsx

import { Breadcrumbs } from '@heroui/react';

export default () => (
  <Breadcrumbs>
    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
    <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>
  </Breadcrumbs>
)

Custom Separator

Disabled State

Custom Render Function

Styling

Passing Tailwind CSS classes

tsx

import { Breadcrumbs } from '@heroui/react';

function CustomBreadcrumbs() {
  return (
    <Breadcrumbs className="gap-2">
      <Breadcrumbs.Item href="#" className="text-blue-600">
        Home
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>Current</Breadcrumbs.Item>
    </Breadcrumbs>
  );
}

Customizing the component classes

To customize the Breadcrumbs component classes, you can use the @layer components directive.

Learn more.

css

@layer components {
  .breadcrumbs {
    @apply gap-4 text-lg;
  }

  .breadcrumbs__link {
    @apply font-semibold;
  }

  .breadcrumbs__separator {
    @apply text-blue-500;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Breadcrumbs component uses these CSS classes (View source styles):

Base Classes

.breadcrumbs - Base breadcrumbs container
.breadcrumbs__item - Individual breadcrumb item wrapper
.breadcrumbs__link - Breadcrumb link element
.breadcrumbs__separator - Separator icon between items

State Classes

.breadcrumbs__link[data-current="true"] - Current page indicator (not a link)

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Current: [data-current="true"] on link (indicates current page)
Hover: Link elements support standard hover states
Disabled: isDisabled prop disables all links

API Reference

Breadcrumbs Props

Prop	Type	Default	Description
`separator`	`ReactNode`	chevron-right icon	Custom separator between breadcrumb items
`isDisabled`	`boolean`	`false`	Whether all breadcrumb links are disabled
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The breadcrumb items
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>`	-	Overrides the default DOM element with a custom render function

Breadcrumbs.Item Props

Prop	Type	Default	Description
`href`	`string`	-	The URL to link to (omit for current page)
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode \| RenderFunction`	-	Item content or render function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, BreadcrumbRenderProps>`	-	Overrides the default DOM element with a custom render function

Accessibility

Breadcrumbs uses React Aria Components' Breadcrumbs primitive, which provides:

Proper ARIA attributes for navigation landmarks
Current page indication via aria-current="page"
Keyboard navigation support
Screen reader announcements for navigation context

The last breadcrumb item (without href) automatically becomes the current page indicator.