Breadcrumb

The Breadcrumb component is a navigation aid that allows users to keep track of their locations within programs, documents, or websites. It enhances user experience by providing a clear path of navigation, making it easier to understand and navigate the application's structure.

Breadcrumb with Chevron

A breadcrumb navigation with chevron (arrow) separators. This style provides a modern and clean look, making the navigation path clear and intuitive.

Source

<Breadcrumb>
    <BreadcrumbItem Href="/" Label="Home" />
    <BreadcrumbItem Href="/components" Label="Components" />
    <BreadcrumbItem Label="Breadcrumb" IsActive="true" />
</Breadcrumb>

Breadcrumb with Slash

A breadcrumb navigation with slash ("/") separators. This traditional style is simple and widely recognized, making it easy for users to follow their navigation path.

Source

<Breadcrumb Separator="MdiIcon.SlashForward">
    <BreadcrumbItem Href="/" Label="Home" Icon="MdiIcon.Home" />
    <BreadcrumbItem Href="/components" Label="Components" />
    <BreadcrumbItem Label="Breadcrumb" IsActive="true" />
</Breadcrumb>

Breadcrumb with Icon

A breadcrumb navigation where the first item includes an icon, providing a visual cue for the starting point of navigation. This enhances the aesthetic appeal and usability of the breadcrumb.

Source

<Breadcrumb>
    <BreadcrumbItem Href="/" Label="Home" Icon="MdiIcon.Home" />
    <BreadcrumbItem Href="/components" Label="Components" />
    <BreadcrumbItem Label="Breadcrumb" IsActive="true" />
</Breadcrumb>