Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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.