📝 | This is a MAUI version of my Xamarin NuGet |
---|
This is a breadcrumb navigation control that is completely automatic and uses the Navigation stack to get the page titles to generate the breadcrumbs.
The animation for the control is based on this article - A Cool Breadcrumbs Bar with Xamarin Forms Animations…
Basic example | Production Example |
---|---|
![]() |
![]() |
Install the NuGet package into all of your projects
Install-Package IeuanWalker.Maui.Breadcrumb
This control uses one of my other controls, StateButton, this is to make this control accessible. Ao you'll need to register the using in the MauiProgram.cs
on the MauiAppBuilder
builder
.UseMauiApp<App>()
.UseStateButton();
To add to a page the first thing we need to do is tell our XAML page where it can find the Breadcrumb control, which is done by adding the following attribute to our ContentPage:
<ContentPage x:Class="App.Pages.BasePage"
xmlns="https://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml"
xmlns:breadcrumb="clr-namespace:Breadcrumb;assembly=Breadcrumb">
<ContentPage.Content>
...
</ContentPage.Content>
</ContentPage>
Next up, just add the breadcrumb control onto that page and you're all set.
<breadcrumb:Breadcrumb />
Property | What it does | Extra info |
---|---|---|
Separator | Sets the image source of the separator | This allows you to set the separator to FontImageSource , UriImageSource or FileImageSource . Default is new FontImageSource { Glyph = " / ", Color = Colors.Black, Size = 15, } |
SeparatorHeight | Sets the height of the separator | Default is 15 |
FirstBreadcrumb | Allows you to override the first breadcrumb and set an image source. F.e. This is usefull if you want the first breadcrumb to be a home icon instead of the default title. | Default will be a label like all the other breadcrumbs |
ScrollBarVisibility | Sets the HorizontalScrollBarVisibility of the scrollview | More info here ScrollBarVisibility. Default value is ScrollBarVisibility.Never |
FontSize | Sets the text font size for the breadcrumb | Default value is 15. Support NamedSize |
TextColor | Sets the text color for the breadcrumb and seperator | A Color object. Default value is black. (doesnt include the last breadcrumb) |
CornerRadius | A CornerRadius object representing each individual corner's radius for each breadcrumb. |
Uses the CornerRadius struct allowing you to specify individual corners. Default value is 10. (doesnt include the last breadcrumb) |
BreadcrumbMargin | A Thickness object used to define the spacing between the breadcrumb and separators |
Uses the Thickness struct allowing you to specify left, top, right and bottom margin |
BreadcrumbBackgroundColor | This is the background color for the individual breadcrumbs | A Color object. Default value is Transparent. (doesnt include the last breadcrumb) |
LastBreadcrumbTextColor | Sets the text color for the last breadcrumb | A Color object. Default value is black. |
LastBreadcrumbCornerRadius | A CornerRadius object representing each individual corner's radius. |
Uses the CornerRadius struct allowing you to specify individual corners. Default value is 10. |
LastBreadcrumbBackgroundColor | Sets the background color of the last breadcrumbs | A Color object. Default value is Transparent. |
AnimationSpeed | Sets the speed of the animated breadcrumb | Default value is 800. Set to 0 to disable the animation. |
IsNavigationEnabled | Used to remove the tab gesture from breadcrumbs | Default value is True |
You are able to change the first breadcrumb to an Icon, embedded image or url image.
<breadcrumb:Breadcrumb Padding="15" VerticalOptions="Start">
<breadcrumb:Breadcrumb.FirstBreadCrumb>
<FontImageSource FontFamily="{StaticResource FontAwesome}"
Glyph="{x:Static icons:IconFont.Home}"
Size="35"
Color="Red" />
</breadcrumb:Breadcrumb.FirstBreadCrumb>
</breadcrumb:Breadcrumb>
You are able to change the separators to an Icon, embedded image or url image.
Font - (FontAwesome)
<breadcrumb:Breadcrumb>
<breadcrumb:Breadcrumb.Separator>
<FontImageSource FontFamily="{StaticResource FontAwesome}"
Glyph="{x:Static icons:IconFont.ChevronRight}"
Size="15"
Color="Red" />
</breadcrumb:Breadcrumb.Separator>
</breadcrumb:Breadcrumb>
Image - URL
<breadcrumb:Breadcrumb>
<breadcrumb:Breadcrumb.Separator>
<UriImageSource Uri="https://cdn.iconscout.com/icon/free/png-256/xamarin-4-599473.png" />
</breadcrumb:Breadcrumb.Separator>
</breadcrumb:Breadcrumb>
Image - Embedded
<breadcrumb:Breadcrumb>
<breadcrumb:Breadcrumb.Separator>
<FileImageSource File="exampleImage.png" />
</breadcrumb:Breadcrumb.Separator>
</breadcrumb:Breadcrumb>