Flowbite Blazor

Breadcrumb Examples

The Breadcrumb component helps users understand their current location within a website's navigation hierarchy.

Use the Breadcrumb component to create a navigation hierarchy with home, projects, and current page items.


<Breadcrumb>
    <BreadcrumbItem IsFirst="true" Href="#" Icon="@_homeIcon">
        Home
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">Projects</BreadcrumbItem>
    <BreadcrumbItem>Flowbite Blazor</BreadcrumbItem>
</Breadcrumb>

Add a solid background style to the breadcrumb component by setting the HasBackground parameter to true.


<Breadcrumb HasBackground="true">
    <BreadcrumbItem IsFirst="true" Href="#" Icon="@_homeIcon">
        Home
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">Projects</BreadcrumbItem>
    <BreadcrumbItem>Flowbite Blazor</BreadcrumbItem>
</Breadcrumb>

Breadcrumb Examples

Default breadcrumb #

Breadcrumb with background #