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';

When to use

Use Breadcrumbs to show where the current page sits in a hierarchy. They are useful for nested resources, settings areas, documentation, and deep product flows.

Do not use breadcrumbs as the only app navigation or as a history trail.

Anatomy

Breadcrumbs are made from ancestor links and a current page label. Items should reflect the information architecture, not the path the user happened to take. Icons can help recognition, but the text label should still be understandable on its own.

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.

Behavior notes

Keep labels short and stable, especially when they come from user-generated data. If a label loads asynchronously, reserve enough space or provide a sensible fallback. When collapsing long trails, keep the nearest parent and current page visible.

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.