# Breadcrumb

Source: https://lumeo.nativ.sh/components/breadcrumb

# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Breadcrumb />

## When to Use

-   Navigating deep hierarchies where users need to understand their location
-   Multi-level pages such as settings, dashboards, or content management systems
-   Providing a quick way to jump back to parent sections without using the browser back button

Preview Code

Default

1.  [Home](#)

3.  [Components](#)

5.  Breadcrumb

Preview Code

With Icons

1.  [](#)

3.  [Documents](#)

5.  [Projects](#)

7.  Report.pdf

Preview Code

Custom Separator

1.  [Home](#)

3.  [Settings](#)

5.  Profile

## API Reference

### Breadcrumb

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Breadcrumb content (typically a BreadcrumbList).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbList

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

List items and separators.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbItem

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Item content (typically a BreadcrumbLink or BreadcrumbPage).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbLink

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Link text or icon content.

Href

string?

"#"

URL the breadcrumb link navigates to.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbPage

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Current page label text.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbSeparator

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Custom separator content. Defaults to a chevron icon.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### BreadcrumbEllipsis

Prop

Type

Default

Description

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [NavigationMenu](/components/navigation-menu) — For primary site-wide navigation in headers
-   [Pagination](/components/pagination) — For navigating between pages of content within a list