{"id":13712960,"url":"https://github.com/IeuanWalker/Xamarin.Forms.Breadcrumb","last_synced_at":"2025-05-06T22:32:10.247Z","repository":{"id":35066749,"uuid":"202733947","full_name":"IeuanWalker/Xamarin.Forms.Breadcrumb","owner":"IeuanWalker","description":"This is a breadcrumb navigation control that is complete automatic and uses the Navigation stack and page titles to generate the breadcrumbs.","archived":false,"fork":false,"pushed_at":"2024-11-04T22:43:34.000Z","size":21566,"stargazers_count":139,"open_issues_count":10,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-05T01:06:42.180Z","etag":null,"topics":["animation","automatic","breadcrumb","breadcrumb-control","control","custom","navigation","nuget","ui","ui-component","user-experience","user-interface","ux","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IeuanWalker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"IeuanWalker"}},"created_at":"2019-08-16T13:38:24.000Z","updated_at":"2025-03-06T10:58:46.000Z","dependencies_parsed_at":"2024-01-08T01:44:37.706Z","dependency_job_id":"59bb4ceb-b187-4a3d-9eef-fc2d80a6f986","html_url":"https://github.com/IeuanWalker/Xamarin.Forms.Breadcrumb","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IeuanWalker%2FXamarin.Forms.Breadcrumb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IeuanWalker%2FXamarin.Forms.Breadcrumb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IeuanWalker%2FXamarin.Forms.Breadcrumb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IeuanWalker%2FXamarin.Forms.Breadcrumb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IeuanWalker","download_url":"https://codeload.github.com/IeuanWalker/Xamarin.Forms.Breadcrumb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252779312,"owners_count":21802924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","automatic","breadcrumb","breadcrumb-control","control","custom","navigation","nuget","ui","ui-component","user-experience","user-interface","ux","xamarin","xamarin-forms"],"created_at":"2024-08-02T23:01:25.186Z","updated_at":"2025-05-06T22:32:06.192Z","avatar_url":"https://github.com/IeuanWalker.png","language":"C#","funding_links":["https://github.com/sponsors/IeuanWalker"],"categories":["UI"],"sub_categories":[],"readme":"| :warning:        | This NuGet/ repo is now in maintenance mode and support will end once xamarin.forms is no longer supported. _Bug fixes only._ \u003c/br\u003e MAUI repo - https://github.com/IeuanWalker/Maui.Breadcrumb      |\n|---------------|:------------------------|\n\n\n# Xamarin.Forms.Breadcrumb [![Nuget](https://img.shields.io/nuget/v/Xamarin.Forms.Breadcrumb)](https://www.nuget.org/packages/Xamarin.Forms.Breadcrumb) [![Nuget](https://img.shields.io/nuget/dt/Xamarin.Forms.Breadcrumb)](https://www.nuget.org/packages/Xamarin.Forms.Breadcrumb) \n\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/15865c5fcb684e8f821d9f87544c4f36)](https://app.codacy.com/app/ieuan.walker007/Xamarin.Forms.Breadcrumb?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=IeuanWalker/Xamarin.Forms.Breadcrumb\u0026utm_campaign=Badge_Grade_Dashboard)\n\n\nThis is a breadcrumb navigation control that is completely automatic and uses the Navigation stack to get the page titles to generate the breadcrumbs.\n\nThe animation for the control is based on this article - [A Cool Breadcrumbs Bar with Xamarin Forms Animations…](https://theconfuzedsourcecode.wordpress.com/2017/02/04/a-cool-breadcrumbs-bar-with-xamarin-forms-animations/)\n\nBasic example             |  Production Example\n:-------------------------:|:-------------------------:\n![Example gif](/Example.gif)  |  ![Production Example gif](/ProdExample.gif)\n\n\n\n## How to use it?\nInstall the [NuGet package](https://www.nuget.org/packages/Xamarin.Forms.Breadcrumb) into all of your projects \n```\nInstall-Package Xamarin.Forms.Breadcrumb\n```\n\nFor iOS add the following to AppDelegate.cs \u003e FinishedLaunching\n```csharp\nBreadcrumbButtonRenderer.Init();\n```\n\nTo 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:\n\n```xml\n\u003cContentPage x:Class=\"DemoApp.Pages.BasePage\"\n             xmlns=\"http://xamarin.com/schemas/2014/forms\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:breadcrumb=\"clr-namespace:Breadcrumb;assembly=Breadcrumb\"\n             xmlns:d=\"http://xamarin.com/schemas/2014/forms/design\"\n             xmlns:mc=\"http://schemas.openxmlformats.org/markup-compatibility/2006\"\n             mc:Ignorable=\"d\"\u003e\n    \u003cContentPage.Content\u003e\n        ...\n    \u003c/ContentPage.Content\u003e\n\u003c/ContentPage\u003e\n```\n\nNext up, just add the breadcrumb control onto that page and you're all set.\n\n```xml\n\u003cbreadcrumb:Breadcrumb Padding=\"15\" VerticalOptions=\"Start\" /\u003e\n```\n\n## What can I do with it?\n\n| Property | What it does | Extra info |\n|---|---|---- |\n| Separator | Sets the image source of the separator | This allows you to set the separator to `FontImageSource`, `UriImageSource` or `FileImageSource`. \u003c/br\u003e Default is **new FontImageSource { Glyph = \" / \", Color = Colors.Black, Size = 15, }** |\n| 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 |\n| ScrollBarVisibility | Sets the HorizontalScrollBarVisibility of the scrollview | More info here [ScrollBarVisibility](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.scrollbarvisibility?view=xamarin-forms). Default value is **ScrollBarVisibility.Never**\n| FontSize | Sets the text font size for the breadcrumb | Default value is **15**. \u003cbr\u003eSupport [`NamedSize`](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.namedsize?view=xamarin-forms) |\n| TextColor | Sets the text color for the breadcrumb and seperator   | A `Color` object. \u003cbr\u003e Default value is **black**. \u003cbr\u003e*(doesnt include the last breadcrumb)* |\n| CornerRadius | A `CornerRadius` object representing each individual corner's radius for each breadcrumb. | Uses the `CornerRadius` struct allowing you to specify individual corners. \u003cbr\u003e Default value is **10**. \u003cbr\u003e *(doesnt include the last breadcrumb)* |\n| 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 |\n| BreadcrumbBackgroundColor | This is the background color for the individual breadcrumbs | A `Color` object. \u003cbr\u003e Default value is **Transparent**. \u003cbr\u003e *(doesnt include the last breadcrumb)* |\n| LastBreadcrumbTextColor | Sets the text color for the last breadcrumb | A Color object. \u003cbr\u003e Default value is **black**. |\n| LastBreadcrumbCornerRadius | A `CornerRadius` object representing each individual corner's radius. | Uses the `CornerRadius` struct allowing you to specify individual corners. \u003cbr\u003e Default value is **10**. |\n| LastBreadcrumbBackgroundColor | Sets the background color of the last breadcrumbs |  A Color object. \u003cbr\u003e Default value is **Transparent**. |\n| AnimationSpeed | Sets the speed of the animated breadcrumb | Default value is **800**. \u003cbr\u003e Set to 0 to disable the animation. |\n| IsNavigationEnabled | Used to remove the tab gesture from breadcrumbs | Default value is **True**|\n\n### First breadcrumb customization\nYou are able to change the first breadcrumb to an Icon, embedded image or url image.\nIt implements the Xamarin.Forms ImageSource object.\n\n```xml\n\u003cbreadcrumb:Breadcrumb Padding=\"15\" VerticalOptions=\"Start\"\u003e\n    \u003cbreadcrumb:Breadcrumb.FirstBreadCrumb\u003e\n        \u003cFontImageSource FontFamily=\"{StaticResource FontAwesome}\"\n                            Glyph=\"{x:Static icons:IconFont.Home}\"\n                            Size=\"35\"\n                            Color=\"Red\" /\u003e\n    \u003c/breadcrumb:Breadcrumb.FirstBreadCrumb\u003e\n\u003c/breadcrumb:Breadcrumb\u003e\n```\n\n### Separator customization \nYou are able to change the separators to an Icon, embedded image or url image.\nIt implements the Xamarin.Forms ImageSource object.\n\nFont - (FontAwesome)\n```xml\n\u003cbreadcrumb:Breadcrumb Padding=\"15\" VerticalOptions=\"Start\"\u003e\n    \u003cbreadcrumb:Breadcrumb.Separator\u003e\n        \u003cFontImageSource FontFamily=\"{StaticResource FontAwesome}\"\n                            Glyph=\"{x:Static icons:IconFont.ChevronRight}\"\n                            Size=\"15\"\n                            Color=\"Red\" /\u003e\n    \u003c/breadcrumb:Breadcrumb.Separator\u003e\n\u003c/breadcrumb:Breadcrumb\u003e\n```\n\nImage - URL\n```xml\n\u003cbreadcrumb:Breadcrumb Padding=\"15\" VerticalOptions=\"Start\"\u003e\n    \u003cbreadcrumb:Breadcrumb.Separator\u003e\n        \u003cUriImageSource Uri=\"https://cdn.iconscout.com/icon/free/png-256/xamarin-4-599473.png\" /\u003e\n    \u003c/breadcrumb:Breadcrumb.Separator\u003e\n\u003c/breadcrumb:Breadcrumb\u003e\n```\n\nImage - Embedded\n```xml\n\u003cbreadcrumb:Breadcrumb Padding=\"15\" VerticalOptions=\"Start\"\u003e\n    \u003cbreadcrumb:Breadcrumb.Separator\u003e\n        \u003cFileImageSource File=\"exampleImage.png\" /\u003e\n    \u003c/breadcrumb:Breadcrumb.Separator\u003e\n\u003c/breadcrumb:Breadcrumb\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIeuanWalker%2FXamarin.Forms.Breadcrumb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIeuanWalker%2FXamarin.Forms.Breadcrumb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIeuanWalker%2FXamarin.Forms.Breadcrumb/lists"}