Home

Awesome

:memo:This is a MAUI version of my Xamarin NuGet

Maui.Breadcrumb Nuget Nuget

License: MIT FOSSA Status Codacy Badge

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 exampleProduction Example
Example gifProduction Example gif

How to use it?

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="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://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 />

What can I do with it?

PropertyWhat it doesExtra info
SeparatorSets the image source of the separatorThis allows you to set the separator to FontImageSource, UriImageSource or FileImageSource. </br> Default is new FontImageSource { Glyph = " / ", Color = Colors.Black, Size = 15, }
SeparatorHeightSets the height of the separatorDefault is 15
FirstBreadcrumbAllows you to override the first breadcrumb and set an image source. F.e. This is useful 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
ScrollBarVisibilitySets the HorizontalScrollBarVisibility of the ScrollViewMore info here ScrollBarVisibility. Default value is ScrollBarVisibility.Never
FontSizeSets the text font size for the breadcrumbDefault value is 15. <br>Support NamedSize
TextColorSets the text color for the breadcrumb and separatorA Color object. <br> Default value is black. <br>(doesn't include the last breadcrumb)
FontFamilySets the font for the breadcrumb textDefaults to default label font
CornerRadiusA CornerRadius object representing each individual corner's radius for each breadcrumb.Uses the CornerRadius struct allowing you to specify individual corners. <br> Default value is 10. <br> (doesn't include the last breadcrumb)
BreadcrumbMarginA Thickness object used to define the spacing between the breadcrumb and separatorsUses the Thickness struct allowing you to specify left, top, right and bottom margin
BreadcrumbBackgroundColorThis is the background color for the individual breadcrumbsA Color object. <br> Default value is Transparent. <br> (doesn't include the last breadcrumb)
LastBreadcrumbTextColorSets the text color for the last breadcrumbA Color object. <br> Default value is black.
LastBreadcrumbCornerRadiusA CornerRadius object representing each individual corner's radius.Uses the CornerRadius struct allowing you to specify individual corners. <br> Default value is 10.
LastBreadcrumbBackgroundColorSets the background color of the last breadcrumbsA Color object. <br> Default value is Transparent.
AnimationSpeedSets the speed of the animated breadcrumbDefault value is 800. <br> Set to 0 to disable the animation.
IsNavigationEnabledUsed to remove the tab gesture from breadcrumbsDefault value is True

First breadcrumb customization

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>

Separator customization

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>

License

FOSSA Status