skip to the main content

RzBreadcrumb

The RzBreadcrumb 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.

RzBreadcrumb 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
<RzBreadcrumb>
    <RzBreadcrumbItem Href="/" Label="Home" />
    <RzBreadcrumbItem Href="/components" Label="Components" />
    <RzBreadcrumbItem Label="RzBreadcrumb" IsActive="true" />
</RzBreadcrumb>

RzBreadcrumb 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
<RzBreadcrumb Separator="MdiIcon.SlashForward">
    <RzBreadcrumbItem Href="/" Label="Home" Icon="MdiIcon.Home" />
    <RzBreadcrumbItem Href="/components" Label="Components" />
    <RzBreadcrumbItem Label="RzBreadcrumb" IsActive="true" />
</RzBreadcrumb>

RzBreadcrumb 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
<RzBreadcrumb>
    <RzBreadcrumbItem Href="/" Label="Home" Icon="MdiIcon.Home" />
    <RzBreadcrumbItem Href="/components" Label="Components" />
    <RzBreadcrumbItem Label="RzBreadcrumb" IsActive="true" />
</RzBreadcrumb>