\n**Basic**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; private readonly List BreadcrumbItemsDisabled = [ new() { Text = "Item 1", Href = "/components/breadcrumb", IsEnabled = false }, new() { Text = "Item 2", Href = "/components/breadcrumb", IsEnabled = false }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; private readonly List BreadcrumbItemsWithTarget = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "bit BlazorUI", Href = "https://blazorui-ai.bitplatform.dev", Target = "_blank", Title = "Opens the bit BlazorUI website in a new tab" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**MaxDisplayedItems & OverflowIndex**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**Icons**: ```razor ``` ```csharp private readonly List BreadcrumbItemsWitIcon = [ new() { Text = "Item 1", Href = "/components/breadcrumb", IconName = BitIconName.AdminELogoInverse32 }, new() { Text = "Item 2", Href = "/components/breadcrumb", IconName = BitIconName.AppsContent }, new() { Text = "Item 3", Href = "/components/breadcrumb", IconName = BitIconName.AzureIcon }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true, IconName = BitIconName.ClassNotebookLogo16 } ]; ``` \n**Divider**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**Templates**: ```razor

@item.Text

``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; private readonly List BreadcrumbItemTemplateItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb", Template = (item => @

@item.Text

), OverflowTemplate = (item => @

@item.Text

) }, new () { Text = "Item 2", Href = "/components/breadcrumb", Template = (item => @

@item.Text

), OverflowTemplate = (item => @

@item.Text

) }, new() { Text = "Item 3", Href = "/components/breadcrumb", Template = (item => @

@item.Text

), OverflowTemplate = (item => @

@item.Text

) }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true, Template = (item => @

@item.Text

), OverflowTemplate = (item => @

@item.Text

) } ]; ``` \n**Events**: ```razor ``` ```csharp private readonly List BreadcrumbItemsWithControlled = [ new() { Text = "Item 1" }, new() { Text = "Item 2" }, new() { Text = "Item 3" }, new() { Text = "Item 4" }, new() { Text = "Item 5" }, new() { Text = "Item 6", IsSelected = true } ]; private void HandleOnItemClick(BitBreadcrumbItem item) { BreadcrumbItemsWithControlled.First(i => i.IsSelected).IsSelected = false; item.IsSelected = true; } ``` \n**Customizations**: ```razor Add Item Remove Item ``` ```csharp private int ItemsCount = 4; private uint OverflowIndex = 2; private uint MaxDisplayedItems = 3; private readonly List BreadcrumbItemsWithCustomized = [ new() { Text = "Item 1" }, new() { Text = "Item 2" }, new() { Text = "Item 3" }, new() { Text = "Item 4", IsSelected = true } ]; private void HandleOnCustomizedItemClick(BitBreadcrumbItem item) { BreadcrumbItemsWithCustomized.First(i => i.IsSelected).IsSelected = false; item.IsSelected = true; } private void AddBreadcrumbItem() { ItemsCount++; BreadcrumbItemsWithCustomized.Add(new BitBreadcrumbItem() { Text = $"Item {ItemsCount}" }); } private void RemoveBreadcrumbItem() { if (BreadcrumbItemsWithCustomized.Count > 1) { ItemsCount--; var item = BreadcrumbItemsWithCustomized[^1]; BreadcrumbItemsWithCustomized.Remove(item); if (item.IsSelected) { BreadcrumbItemsWithCustomized[^1].IsSelected = true; } } } ``` \n**Truncation, Wrapping & Scrolling**: ```razor

``` ```csharp private readonly List BreadcrumbItemsWithLongText = [ new() { Text = "Very long folder name 1", Href = "/components/breadcrumb", Title = "Very long folder name 1" }, new() { Text = "Very long folder name 2", Href = "/components/breadcrumb", Title = "Very long folder name 2" }, new() { Text = "Very long folder name 3", Href = "/components/breadcrumb", Title = "Very long folder name 3" }, new() { Text = "Very long folder name 4", Href = "/components/breadcrumb", Title = "Very long folder name 4", IsSelected = true } ]; ``` \n**Structured Data**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**Expand Overflow**: ```razor ``` ```csharp private readonly List BreadcrumbItemsWithControlled = [ new() { Text = "Item 1" }, new() { Text = "Item 2" }, new() { Text = "Item 3" }, new() { Text = "Item 4" }, new() { Text = "Item 5" }, new() { Text = "Item 6", IsSelected = true } ]; private readonly List BreadcrumbItemsWithLongText = [ new() { Text = "Very long folder name 1", Href = "/components/breadcrumb" }, new() { Text = "Very long folder name 2", Href = "/components/breadcrumb" }, new() { Text = "Very long folder name 3", Href = "/components/breadcrumb" }, new() { Text = "Very long folder name 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**Color**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**External Icons**: ```razor ``` ```csharp private readonly List BreadcrumbItemsWithExternalIcon1 = [ new() { Text = "Home", Icon = "fa-solid fa-house" }, new() { Text = "Products", Icon = "fa-solid fa-box" }, new() { Text = "Electronics", Icon = "fa-solid fa-microchip" }, new() { Text = "Laptops", Icon = "fa-solid fa-laptop", IsSelected = true } ]; private readonly List BreadcrumbItemsWithExternalIcon2 = [ new() { Text = "Home", Icon = BitIconInfo.Css("fa-solid fa-house") }, new() { Text = "Products", Icon = BitIconInfo.Css("fa-solid fa-box") }, new() { Text = "Electronics", Icon = BitIconInfo.Css("fa-solid fa-microchip") }, new() { Text = "Laptops", Icon = BitIconInfo.Css("fa-solid fa-laptop"), IsSelected = true } ]; private readonly List BreadcrumbItemsWithExternalIcon3 = [ new() { Text = "Home", Icon = BitIconInfo.Fa("solid house") }, new() { Text = "Products", Icon = BitIconInfo.Fa("solid box") }, new() { Text = "Electronics", Icon = BitIconInfo.Fa("solid microchip") }, new() { Text = "Laptops", Icon = BitIconInfo.Fa("solid laptop"), IsSelected = true } ]; private readonly List BreadcrumbItemsWithExternalIcon4 = [ new() { Text = "Home", Icon = BitIconInfo.Bi("house-fill") }, new() { Text = "Products", Icon = BitIconInfo.Bi("box-seam-fill") }, new() { Text = "Electronics", Icon = BitIconInfo.Bi("cpu-fill") }, new() { Text = "Laptops", Icon = BitIconInfo.Bi("laptop-fill"), IsSelected = true } ]; ``` \n**Size**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; ``` \n**Style & Class**: ```razor ``` ```csharp private readonly List BreadcrumbItems = [ new() { Text = "Item 1", Href = "/components/breadcrumb" }, new() { Text = "Item 2", Href = "/components/breadcrumb" }, new() { Text = "Item 3", Href = "/components/breadcrumb" }, new() { Text = "Item 4", Href = "/components/breadcrumb", IsSelected = true } ]; private readonly List BreadcrumbItemsWithClass = [ new() { Text = "Item 1", Href = "/components/breadcrumb", Class = "custom-item-1" }, new() { Text = "Item 2", Href = "/components/breadcrumb", Class = "custom-item-2" }, new() { Text = "Item 3", Href = "/components/breadcrumb", Class = "custom-item-1" }, new() { Text = "Item 4", Href = "/components/breadcrumb", Class = "custom-item-2", IsSelected = true } ]; private readonly List BreadcrumbItemsWithStyle = [ new() { Text = "Item 1", Href = "/components/breadcrumb", Style = "color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" }, new() { Text = "Item 2", Href = "/components/breadcrumb", Style = "color: aqua; text-shadow: aqua 0 0 1rem;" }, new() { Text = "Item 3", Href = "/components/breadcrumb", Style = "color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" }, new() { Text = "Item 4", Href = "/components/breadcrumb", Style = "color: aqua; text-shadow: aqua 0 0 1rem;", IsSelected = true } ]; ``` \n**RTL**: ```razor ``` ```csharp private readonly List RtlBreadcrumbItems = [ new() { Text = "پوشه اول" }, new() { Text = "پوشه دوم", IsSelected = true }, new() { Text = "پوشه سوم" }, new() { Text = "پوشه چهارم" }, new() { Text = "پوشه پنجم" }, new() { Text = "پوشه ششم" }, ]; ```

\n**Basic**: ```razor ``` ```csharp public class PageInfo { public string Name { get; set; } public string Address { get; set; } public string HtmlClass { get; set; } public string HtmlStyle { get; set; } public string Tooltip { get; set; } public string OpenIn { get; set; } public bool IsCurrent { get; set; } public bool IsEnabled { get; set; } = true; } private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsDisabled = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", IsEnabled = false }, new() { Name = "Custom 2", Address = "/components/breadcrumb", IsEnabled = false }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithTarget = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "bit BlazorUI", Address = "https://blazorui-ai.bitplatform.dev", OpenIn = "_blank", Tooltip = "Opens the bit BlazorUI website in a new tab" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, Title = { Selector = c => c.Tooltip }, Target = { Selector = c => c.OpenIn }, IsSelected = { Selector = c => c.IsCurrent }, Class = { Selector = c => c.HtmlClass }, Style = { Selector = c => c.HtmlStyle } }; ``` \n**MaxDisplayedItems & OverflowIndex**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Icons**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItemsWithIcon = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", Icon = BitIconName.AdminELogoInverse32 }, new() { Name = "Custom 2", Address = "/components/breadcrumb", Icon = BitIconName.AppsContent }, new() { Name = "Custom 3", Address = "/components/breadcrumb", Icon = BitIconName.AzureIcon }, new() { Name = "Custom 4", Address = "/components/breadcrumb", Icon = BitIconName.ClassNotebookLogo16, IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IconName = { Selector = c => c.Icon }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Divider**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; ``` \n**Templates**: ```razor

@item.Name

``` ```csharp private readonly List CustomBreadcrumbItemTemplateItems = [ new() { Name = "Item 1", Address = "/components/breadcrumb", Fragment = (item => @

@item.Name

), OverflowFragment = (item => @

@item.Name

) }, new () { Name = "Item 2", Address = "/components/breadcrumb", Fragment = (item => @

@item.Name

), OverflowFragment = (item => @

@item.Name

) }, new() { Name = "Item 3", Address = "/components/breadcrumb", Fragment = (item => @

@item.Name

), OverflowFragment = (item => @

@item.Name

) }, new() { Name = "Item 4", Address = "/components/breadcrumb", IsCurrent = true, Fragment = (item => @

@item.Name

), OverflowFragment = (item => @

@item.Name

) } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent }, Template = { Name = nameof(PageInfo.Fragment) }, OverflowTemplate = { Name = nameof(PageInfo.OverflowFragment) } }; ``` \n**Events**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItemsWithControlled = [ new() { Name = "Custom 1" }, new() { Name = "Custom 2" }, new() { Name = "Custom 3" }, new() { Name = "Custom 4" }, new() { Name = "Custom 5" }, new() { Name = "Custom 6", IsCurrent = true } ]; private void HandleOnCustomClick(PageInfo model) { CustomBreadcrumbItemsWithControlled.First(i => i.IsCurrent).IsCurrent = false; model.IsCurrent = true; } ``` \n**Customizations**: ```razor Add Item Remove Item ``` ```csharp private int ItemsCount = 4; private uint OverflowIndex = 2; private uint MaxDisplayedItems = 3; private readonly List CustomBreadcrumbItemsWithCustomized = [ new() { Name = "Custom 1" }, new() { Name = "Custom 2" }, new() { Name = "Custom 3" }, new() { Name = "Custom 4", IsCurrent = true } ]; private void HandleOnCustomizedCustomClick(PageInfo model) { CustomBreadcrumbItemsWithCustomized.First(i => i.IsCurrent).IsCurrent = false; model.IsCurrent = true; } private void AddCustomItem() { ItemsCount++; CustomBreadcrumbItemsWithCustomized.Add(new PageInfo() { Name = $"Custom {ItemsCount}" }); } private void RemoveCustomItem() { if (CustomBreadcrumbItemsWithCustomized.Count > 1) { ItemsCount--; var item = CustomBreadcrumbItemsWithCustomized[^1]; CustomBreadcrumbItemsWithCustomized.Remove(item); if (item.IsCurrent) { CustomBreadcrumbItemsWithCustomized[^1].IsCurrent = true; } } } ``` \n**Truncation, Wrapping & Scrolling**: ```razor

``` ```csharp private readonly List CustomBreadcrumbItemsWithLongText = [ new() { Name = "Very long folder name 1", Address = "/components/breadcrumb", Tooltip = "Very long folder name 1" }, new() { Name = "Very long folder name 2", Address = "/components/breadcrumb", Tooltip = "Very long folder name 2" }, new() { Name = "Very long folder name 3", Address = "/components/breadcrumb", Tooltip = "Very long folder name 3" }, new() { Name = "Very long folder name 4", Address = "/components/breadcrumb", Tooltip = "Very long folder name 4", IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, Title = { Selector = c => c.Tooltip }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Structured Data**: ```razor ``` ```csharp public class PageInfo { public string? Name { get; set; } public string? Address { get; set; } public bool IsCurrent { get; set; } } private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Expand Overflow**: ```razor ``` ```csharp public class PageInfo { public string? Name { get; set; } public string? Address { get; set; } public bool IsCurrent { get; set; } } private readonly List CustomBreadcrumbItemsWithControlled = [ new() { Name = "Custom 1" }, new() { Name = "Custom 2" }, new() { Name = "Custom 3" }, new() { Name = "Custom 4" }, new() { Name = "Custom 5" }, new() { Name = "Custom 6", IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithLongText = [ new() { Name = "Very long folder name 1", Address = "/components/breadcrumb" }, new() { Name = "Very long folder name 2", Address = "/components/breadcrumb" }, new() { Name = "Very long folder name 3", Address = "/components/breadcrumb" }, new() { Name = "Very long folder name 4", Address = "/components/breadcrumb", IsCurrent = true } ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Color**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; ``` \n**External Icons**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItemsWithExternalIcon1 = [ new() { Name = "Home", IconInfo = "fa-solid fa-house" }, new() { Name = "Products", IconInfo = "fa-solid fa-box" }, new() { Name = "Electronics", IconInfo = "fa-solid fa-microchip" }, new() { Name = "Laptops", IconInfo = "fa-solid fa-laptop", IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithExternalIcon2 = [ new() { Name = "Home", IconInfo = BitIconInfo.Css("fa-solid fa-house") }, new() { Name = "Products", IconInfo = BitIconInfo.Css("fa-solid fa-box") }, new() { Name = "Electronics", IconInfo = BitIconInfo.Css("fa-solid fa-microchip") }, new() { Name = "Laptops", IconInfo = BitIconInfo.Css("fa-solid fa-laptop"), IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithExternalIcon3 = [ new() { Name = "Home", IconInfo = BitIconInfo.Fa("solid house") }, new() { Name = "Products", IconInfo = BitIconInfo.Fa("solid box") }, new() { Name = "Electronics", IconInfo = BitIconInfo.Fa("solid microchip") }, new() { Name = "Laptops", IconInfo = BitIconInfo.Fa("solid laptop"), IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithExternalIcon4 = [ new() { Name = "Home", IconInfo = BitIconInfo.Bi("house-fill") }, new() { Name = "Products", IconInfo = BitIconInfo.Bi("box-seam-fill") }, new() { Name = "Electronics", IconInfo = BitIconInfo.Bi("cpu-fill") }, new() { Name = "Laptops", IconInfo = BitIconInfo.Bi("laptop-fill"), IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Icon = { Selector = c => c.IconInfo }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Size**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb" }, new() { Name = "Custom 2", Address = "/components/breadcrumb" }, new() { Name = "Custom 3", Address = "/components/breadcrumb" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", IsCurrent = true } ]; ``` \n**Style & Class**: ```razor ``` ```csharp private readonly List CustomBreadcrumbItemsWithClass = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", HtmlClass = "custom-item-1" }, new() { Name = "Custom 2", Address = "/components/breadcrumb", HtmlClass = "custom-item-2" }, new() { Name = "Custom 3", Address = "/components/breadcrumb", HtmlClass = "custom-item-1" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", HtmlClass = "custom-item-2", IsCurrent = true } ]; private readonly List CustomBreadcrumbItemsWithStyle = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", HtmlStyle = "color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" }, new() { Name = "Custom 2", Address = "/components/breadcrumb", HtmlStyle = "color: aqua; text-shadow: aqua 0 0 1rem;" }, new() { Name = "Custom 3", Address = "/components/breadcrumb", HtmlStyle = "color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" }, new() { Name = "Custom 4", Address = "/components/breadcrumb", HtmlStyle = "color: aqua; text-shadow: aqua 0 0 1rem;", IsCurrent = true } ]; private BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, Class = { Selector = c => c.HtmlClass }, Style = { Selector = c => c.HtmlStyle }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**RTL**: ```razor ``` ```csharp private readonly List RtlCustomBreadcrumbItems = [ new() { Name = "پوشه اول" }, new() { Name = "پوشه دوم", IsCurrent = true }, new() { Name = "پوشه سوم" }, new() { Name = "پوشه چهارم" }, new() { Name = "پوشه پنجم" }, new() { Name = "پوشه ششم" }, ]; ```

\n**Basic**: ```razor ``` \n**MaxDisplayedItems & OverflowIndex**: ```razor ``` \n**Icons**: ```razor ``` \n**Divider**: ```razor ``` \n**Templates**: ```razor

@item.Text

``` \n**Events**: ```razor ``` ```csharp private int SelectedOptionNumber = 6; ``` \n**Customizations**: ```razor @for (int i = 0; i < ItemsCount; i++) { int index = i + 1; } Add Option Remove Option ``` ```csharp private int ItemsCount = 4; private uint OverflowIndex = 2; private uint MaxDisplayedItems = 3; private int CustomizedSelectedOptionNumber = 4; private void RemoveOption() { if (ItemsCount <= 1) return; ItemsCount--; if (CustomizedSelectedOptionNumber > ItemsCount) { CustomizedSelectedOptionNumber = ItemsCount; } } ``` \n**Truncation, Wrapping & Scrolling**: ```razor

``` \n**Auto Collapse**: ```razor

``` \n**Structured Data**: ```razor ``` \n**Expand Overflow**: ```razor ``` \n**Color**: ```razor @foreach (var color in colors) { } @code { private readonly BitColor[] colors = [ BitColor.Primary, BitColor.Secondary, BitColor.Tertiary, BitColor.Info, BitColor.Success, BitColor.Warning, BitColor.SevereWarning, BitColor.Error ]; } ``` \n**External Icons**: ```razor ``` \n**Size**: ```razor @foreach (var size in sizes) { } @code { private readonly BitSize[] sizes = [BitSize.Small, BitSize.Medium, BitSize.Large]; } ``` \n**Style & Class**: ```razor ``` \n**RTL**: ```razor ```