\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", IsDisabled = true }, new() { Text = "Item 2", Href = "/components/breadcrumb", IsDisabled = true }, 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 = "bit BlazorUI", Href = "https://blazorui-ai.bitplatform.dev", Target = "_blank", Title = "Opens the bit BlazorUI website in a new tab" }, new() { Text = "Item 3", 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**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**Auto Collapse**: ```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", 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**Icons & Divider**: ```razor ``` ```csharp private readonly List BreadcrumbItemsWithIcon = [ 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 } ]; private readonly List BreadcrumbItemsWithHomeIcon = [ new() { IconName = BitIconName.Home, AriaLabel = "Home", 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

), 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 & Dynamic Items**: ```razor Add item ``` ```csharp private readonly List BreadcrumbItemsWithCustomized = [ new() { Text = "Item 1" }, new() { Text = "Item 2" }, new() { Text = "Item 3" }, new() { Text = "Item 4", IsSelected = true } ]; // Going back up to an item drops the levels below it, which makes it the current page. private void HandleOnCustomizedItemClick(BitBreadcrumbItem item) { var index = BreadcrumbItemsWithCustomized.IndexOf(item); BreadcrumbItemsWithCustomized.RemoveRange(index + 1, BreadcrumbItemsWithCustomized.Count - index - 1); item.IsSelected = true; } private void AddBreadcrumbItem() { BreadcrumbItemsWithCustomized[^1].IsSelected = false; BreadcrumbItemsWithCustomized.Add(new() { Text = $"Item {BreadcrumbItemsWithCustomized.Count + 1}", 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**Cascading parameters**: ```razor ``` ```csharp private readonly BitBreadcrumbParams[] breadcrumbParams = [ new() { DividerText = "/", MaxDisplayedItems = 3, OverflowIndex = 1, SelectedItemAsText = true, } ]; 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**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 = "پوشه دوم" }, new() { Text = "پوشه سوم" }, new() { Text = "پوشه چهارم" }, new() { Text = "پوشه پنجم" }, new() { Text = "پوشه ششم", IsSelected = true }, ]; ```

\n**Basic**: ```razor ``` ```csharp public class PageInfo { public string? Name { get; set; } public string? Address { get; set; } public string? Tooltip { get; set; } public string? OpenIn { get; set; } public bool IsCurrent { get; set; } public bool IsDisabled { 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 List CustomBreadcrumbItemsDisabled = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", IsDisabled = true }, new() { Name = "Custom 2", Address = "/components/breadcrumb", IsDisabled = true }, 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 = "bit BlazorUI", Address = "https://blazorui-ai.bitplatform.dev", OpenIn = "_blank", Tooltip = "Opens the bit BlazorUI website in a new tab" }, new() { Name = "Custom 3", Address = "/components/breadcrumb", IsCurrent = true } ]; private readonly 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 }, IsDisabled = { Name = nameof(PageInfo.IsDisabled) } }; ``` \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 readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \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 readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, Title = { Selector = c => c.Tooltip }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Auto Collapse**: ```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 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 readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, Title = { Selector = c => c.Tooltip }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Icons & Divider**: ```razor ``` ```csharp public class PageInfo { public string? Name { get; set; } public string? Address { get; set; } public string? Icon { get; set; } public string? Label { get; set; } public bool IsCurrent { get; set; } } 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 readonly List CustomBreadcrumbItemsWithHomeIcon = [ new() { Icon = BitIconName.Home, Label = "Home", 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 }, IconName = { Selector = c => c.Icon }, AriaLabel = { Selector = c => c.Label }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Templates**: ```razor

@item.Name

``` ```csharp public class PageInfo { public string? Name { get; set; } public string? Address { get; set; } public bool IsCurrent { get; set; } public RenderFragment? Fragment { get; set; } public RenderFragment? OverflowFragment { 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 List CustomBreadcrumbItemTemplateItems = [ new() { Name = "Custom 1", Address = "/components/breadcrumb", Fragment = (item => @

@item.Name

), OverflowFragment = (item => @

@item.Name

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

@item.Name

), OverflowFragment = (item => @

@item.Name

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

@item.Name

), OverflowFragment = (item => @

@item.Name

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

@item.Name

), OverflowFragment = (item => @

@item.Name

) } ]; private readonly 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 & Dynamic Items**: ```razor Add item ``` ```csharp private readonly List CustomBreadcrumbItemsWithCustomized = [ new() { Name = "Custom 1" }, new() { Name = "Custom 2" }, new() { Name = "Custom 3" }, new() { Name = "Custom 4", IsCurrent = true } ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, IsSelected = { Selector = c => c.IsCurrent } }; // Going back up to an item drops the levels below it, which makes it the current page. private void HandleOnCustomizedCustomClick(PageInfo model) { var index = CustomBreadcrumbItemsWithCustomized.IndexOf(model); CustomBreadcrumbItemsWithCustomized.RemoveRange(index + 1, CustomBreadcrumbItemsWithCustomized.Count - index - 1); model.IsCurrent = true; } private void AddCustomItem() { CustomBreadcrumbItemsWithCustomized[^1].IsCurrent = false; CustomBreadcrumbItemsWithCustomized.Add(new() { Name = $"Custom {CustomBreadcrumbItemsWithCustomized.Count + 1}", IsCurrent = true }); } ``` \n**Structured Data**: ```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 readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitBreadcrumbParams[] breadcrumbParams = [ new() { DividerText = "/", MaxDisplayedItems = 3, OverflowIndex = 1, SelectedItemAsText = 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 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 } ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**External Icons**: ```razor ``` ```csharp public class PageInfo { public string? Name { get; set; } public BitIconInfo? IconInfo { get; set; } public bool IsCurrent { get; set; } } 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 readonly 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 } ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent } }; ``` \n**Style & Class**: ```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 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 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 readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, Href = { Selector = c => c.Address }, IsSelected = { Selector = c => c.IsCurrent }, Class = { Selector = c => c.HtmlClass }, Style = { Selector = c => c.HtmlStyle } }; ``` \n**RTL**: ```razor ``` ```csharp private readonly List RtlCustomBreadcrumbItems = [ new() { Name = "پوشه اول" }, new() { Name = "پوشه دوم" }, new() { Name = "پوشه سوم" }, new() { Name = "پوشه چهارم" }, new() { Name = "پوشه پنجم" }, new() { Name = "پوشه ششم", IsCurrent = true }, ]; private readonly BitBreadcrumbNameSelectors nameSelectors = new() { Text = { Selector = c => c.Name }, IsSelected = { Selector = c => c.IsCurrent } }; ```

\n**Basic**: ```razor ``` \n**MaxDisplayedItems & OverflowIndex**: ```razor ``` \n**Truncation, Wrapping & Scrolling**: ```razor

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

``` \n**Expand Overflow**: ```razor

``` \n**Icons & Divider**: ```razor ``` \n**Templates**: ```razor

@item.Text

``` \n**Events & Dynamic Items**: ```razor @for (int i = 1; i <= ItemsCount; i++) { int index = i; } Add option ``` ```csharp // The options after the current one are the levels below it, so going back up is just a shorter trail. private int ItemsCount = 4; ``` \n**Structured Data**: ```razor ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitBreadcrumbParams[] breadcrumbParams = [ new() { DividerText = "/", MaxDisplayedItems = 3, OverflowIndex = 1, SelectedItemAsText = true, } ]; ``` \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 ```