Heimerle + Meule Logo
Heimerle + Meule

Breadcrumb

Breadcrumb components for displaying hierarchical navigation. Use PageBreadcrumb for most scenarios or Breadcrumb primitives for custom layouts.

Quick Start

Use PageBreadcrumb to automatically generate a breadcrumb trail from a simple items array.

1import { PageBreadcrumb } from "@ecos/ui";
2
3<PageBreadcrumb
4  locale="en"
5  items={[
6    { label: "Home", href: "/" },
7    { label: "Products", href: "/products" },
8    { label: "Semi-Finished" },
9  ]}
10/>

Automatic Breadcrumb Generation

Provide an array of breadcrumb items. Any item with an href is rendered as a link. The final item is typically rendered as the current page.

1<PageBreadcrumb
2  locale="en"
3  items={[
4    { label: "Home", href: "/" },
5    { label: "Products", href: "/products" },
6    { label: "Semi-Finished", href: "/products/semi-finished" },
7    { label: "Sheet" },
8  ]}
9/>

Localization

PageBreadcrumb uses localized links and requires a locale value.

1<PageBreadcrumb
2  locale="fr"
3  items={[
4    { label: "Accueil", href: "/" },
5    { label: "Produits", href: "/products" },
6    { label: "Détails" },
7  ]}
8/>

Common Patterns

Breadcrumbs can represent different hierarchy depths.

Simple

Nested

1<Breadcrumb>
2  <BreadcrumbList>
3    <BreadcrumbItem>
4      <BreadcrumbLink href="#">Home</BreadcrumbLink>
5    </BreadcrumbItem>
6
7    <BreadcrumbSeparator />
8
9    <BreadcrumbItem>
10      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
11    </BreadcrumbItem>
12
13    <BreadcrumbSeparator />
14
15    <BreadcrumbItem>
16      <BreadcrumbPage>Semi-Finished</BreadcrumbPage>
17    </BreadcrumbItem>
18  </BreadcrumbList>
19</Breadcrumb>

Custom Separators

Provide custom content to the separator component when required.

Default Separator

Custom Separator

1<BreadcrumbSeparator>
2  <ChevronRight />
3</BreadcrumbSeparator>

Current Page

Use BreadcrumbPage to indicate the current location.

Link

Current Page

ProductsProduct Details
1<BreadcrumbItem>
2  <BreadcrumbPage>
3    Product Details
4  </BreadcrumbPage>
5</BreadcrumbItem>

Advanced Usage

Use the lower-level Breadcrumb primitives when you need complete control over structure, links, separators, or rendering behaviour.

1import {
2Breadcrumb,
3BreadcrumbList,
4BreadcrumbItem,
5BreadcrumbLink,
6BreadcrumbPage,
7BreadcrumbSeparator,
8} from "@ecos/ui";
9
10<Breadcrumb>
11  <BreadcrumbList>
12    <BreadcrumbItem>
13      <BreadcrumbLink href="#">
14        Home
15      </BreadcrumbLink>
16    </BreadcrumbItem>
17
18    <BreadcrumbSeparator />
19
20    <BreadcrumbItem>
21      <BreadcrumbPage>
22        Products
23      </BreadcrumbPage>
24    </BreadcrumbItem>
25  </BreadcrumbList>
26</Breadcrumb>

API Reference

PageBreadcrumb

Property

Type

Default

Description

itemsPageBreadcrumbItem[]-Breadcrumb items used to automatically generate the navigation trail.
localestring-Locale passed to localized links when generating breadcrumb navigation.

Breadcrumb

Property

Type

Default

Description

classNamestring-Additional classes applied to the root navigation element.
childrenReactNode-The breadcrumb content rendered within the navigation container.

BreadcrumbList

Property

Type

Default

Description

classNamestring-Additional classes applied to the breadcrumb list.
childrenReactNode-Breadcrumb items and separators rendered within the list.

BreadcrumbItem

Property

Type

Default

Description

classNamestring-Additional classes applied to the breadcrumb item.
childrenReactNode-The breadcrumb link, page, or separator content.

BreadcrumbLink

Property

Type

Default

Description

hrefstring-Destination URL for the breadcrumb link.
classNamestring-Additional classes applied to the link element.
childrenReactNode-Content displayed within the breadcrumb link.

BreadcrumbPage

Property

Type

Default

Description

classNamestring-Additional classes applied to the current page element.
childrenReactNode-The label representing the current page.

BreadcrumbSeparator

Property

Type

Default

Description

classNamestring-Additional classes applied to the separator element.
childrenReactNode/Custom separator content displayed between breadcrumb items.

Visual Reference

Example

Preview

PageBreadcrumb
Two Levels
Three Levels
Four Levels