Breadcrumb

As defined by the W3C:

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.

fluent-breadcrumb

Setup

Basic Setup

import {
    provideFluentDesignSystem,
    fluentBreadcrumb,
    fluentBreadcrumbItem
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentBreadcrumb(),
        fluentBreadcrumbItem()
    );

Custom Separator

import {
    provideFluentDesignSystem,
    fluentBreadcrumb,
    fluentBreadcrumbItem
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentBreadcrumb(),
        fluentBreadcrumbItem({
            separator: " -> "
        })
    );

Example

Please see the Blazor documentation and demo site for more information.

Note

This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.