Completeness: styles-sufficient

The stylesheet is the whole component. There is no keyboard map beyond what the native element already does and nothing sets state at runtime that the CSS keys on, so a CSS-only port reproduces it.

Import

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

Usage

"use client";

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

export default function BreadcrumbsBasic() {

Anatomy

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

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

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

Home
Current Page

"use client";

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

export default function BreadcrumbsLevel2() {

Home
Category
Current Page

"use client";

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

export default function BreadcrumbsLevel3() {

Custom Separator

"use client";

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

export default function BreadcrumbsCustomSeparator() {

Disabled State

Home
Products
Electronics
Laptop

"use client";

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

export default function BreadcrumbsDisabled() {

Custom Render Function

Home

Products

Electronics

Laptop

"use client";

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

export function CustomRenderFunction() {

Styling

Passing Tailwind CSS classes

import { Breadcrumbs } from '@blakeui/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.

A worked example is in Styling.

blakeUI 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.

Breadcrumbs