Breadcrumbs

The Open UI Kit Breadcrumbs component shows a page's location in a hierarchy and lets users move back through ancestor pages.

Introduction

Breadcrumbs are useful when users move through nested product areas such as workspaces, projects, resources, and detail pages. They provide orientation without taking over the page.

Open UI Kit Breadcrumbs render an ordered list from items. Each item can include text, a route link, and an optional icon.

Import

import { Breadcrumbs } from '@open-ui-kit/core';

Router provider

Breadcrumb links use react-router-dom internally. Render Breadcrumbs inside a router provider such as BrowserRouter, MemoryRouter, or your app's existing router.

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <Breadcrumbs items={items} />
</BrowserRouter>

Depth

Breadcrumbs work for shallow and deep paths. The current page is rendered with the active pressed color treatment.

Collapsed items

Use maximumNumberOfVisibleBreadcrumbs to keep long hierarchies compact. When the number of items exceeds the limit, the middle items collapse behind an overflow control.

Icons

Items can include an icon. Use iconPosition globally or per item when the icon should sit on the left or right of the label.

Sizes

Use the medium size for most page headers. Use small in dense toolbars, side panels, or compact cards.

Props

Breadcrumbs supports the underlying breadcrumb props, plus Open UI Kit item, size, icon, and collapse props.

Item shape

interface BreadcrumbItem {
  text: string;
  link?: string;
  Icon?: LinkProps['Icon'];
  iconPosition?: IconPosition;
}

Accessibility

Breadcrumbs render with aria-label="breadcrumb" by default. Keep labels short and meaningful, and make sure the final item clearly names the current page.

Usage guidance

• Use breadcrumbs for real hierarchy, not recent navigation history.
• Keep the current page as the final item.
• Collapse deep paths on narrow or dense layouts.
• Avoid icons unless they add useful context to the hierarchy.