Usage

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

Anatomy

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>
)

Examples

Home
Current Page

Home
Category
Current Page

Disabled State

Home
Products
Electronics
Laptop

Custom Separator

Render Function

Home

Products

Electronics

Laptop

Customization

Tailwind CSS

Home
Products
Laptop

Global CSS

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

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

  .breadcrumbs__link {
    @apply font-semibold;
  }

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

Styling Reference

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

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

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.