Skip to content
Lenso UI

Breadcrumbs

Navigation breadcrumbs showing the current page's location within a hierarchy

Usage

import { Breadcrumbs } from '@lenso/ui';
"use client";
import { Breadcrumbs } from "@lenso/ui";
export function BreadcrumbsBasic() {  return (    <Breadcrumbs>      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>      <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>      <Breadcrumbs.Item href="#">Electronics</Breadcrumbs.Item>      <Breadcrumbs.Item>Laptop</Breadcrumbs.Item>    </Breadcrumbs>  );}export default BreadcrumbsBasic;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

import { Breadcrumbs } from '@lenso/ui';
export default () => (  <Breadcrumbs>    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>    <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>  </Breadcrumbs>)

Examples

"use client";export { BreadcrumbsLevel2 } from "./source";export { BreadcrumbsLevel2 as default } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

"use client";export { BreadcrumbsLevel3 } from "./source";export { BreadcrumbsLevel3 as default } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Disabled State

"use client";export { BreadcrumbsDisabled } from "./source";export { BreadcrumbsDisabled as default } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Custom Separator

"use client";export { BreadcrumbsCustomSeparator } from "./source";export { BreadcrumbsCustomSeparator as default } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

"use client";export { RenderFunction } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";export { CustomStyles } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

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 [!toc]

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

State Classes [!toc]

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

PropTypeDefaultDescription
separatorReactNodechevron-right iconCustom separator between breadcrumb items
isDisabledbooleanfalseWhether all breadcrumb links are disabled
classNamestring-Additional CSS classes
childrenReactNode-The breadcrumb items
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>-Overrides the default DOM element with a custom render function.
PropTypeDefaultDescription
hrefstring-The URL to link to (omit for current page)
classNamestring-Additional CSS classes
childrenReactNode | RenderFunction-Item content or render function
renderDOMRenderFunction<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.

Link

A styled anchor component for navigation with built-in icon support

Separator

Visually divide content sections

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.