Breadcrumb appearance questions

[pkothare]

Typical implementations of a breadcrumb allow you to distinguish between ancestor breadcrumb items and the leaf breadcrumb by doing a visual scan using color, usually because the ancestors are hyperlinks. For example:

From the FAST site: https://explore.fast.design/components/fast-breadcrumb

From GitHub:

Is there any way to achieve the same outcome with the FluentBreadcrumbItem without having to override shadow dom CSS? Is there a simpler solution? If there is, I wasn't able to infer it from the Breadcrumb - demo site.

[vnbaaij]

You can use the Class and/or Style parameters to change the appearnace of items anyway you like (Class and Style are available to any component derived from FluentComponentBase)

Doing somthing like

BreadcrumbDefault.razor

<span>
    <FluentBreadcrumb>
        <FluentBreadcrumbItem Class="parent" Href="#">
            Breadcrumb item 1
        </FluentBreadcrumbItem>
        <FluentBreadcrumbItem Class="parent" Href="#">
            Breadcrumb item 2
        </FluentBreadcrumbItem>
        <FluentBreadcrumbItem>Breadcrumb item 3</FluentBreadcrumbItem>
    </FluentBreadcrumb>
</span>

and

BreadcrumbDefault.razor.css

::deep fluent-breadcrumb-item.parent {
    color: #ff6a00;
}

Will give you: