BreadcrumbsNew

Import

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

Usage

"use client";

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

export default function BreadcrumbsBasic() {

Anatomy

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

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

Navigation Levels

"use client";

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

export default function BreadcrumbsLevel2() {

"use client";

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

export default function BreadcrumbsLevel3() {

Custom Separator

"use client";

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

export default function BreadcrumbsCustomSeparator() {

Disabled State

"use client";

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

export default function BreadcrumbsDisabled() {

Styling

Passing Tailwind CSS classes

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.

@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

Breadcrumbs.Item Props

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.