Accent color
# Breadcrumb
## Description
Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content of the BitBreadcrumb, that are BitBreadOption components. |
| Classes | `BitBreadcrumbClassStyles?` | null | Custom CSS classes for different parts of the breadcrumb. |
| DividerIcon | `BitIconInfo?` | null | Render a custom divider icon in place of the default chevron. |
| DividerIconName | `string?` | null | The divider icon name. |
| DividerIconTemplate | `RenderFragment?` | null | The custom template content to render divider icon. |
| Items | `IList<TItem>` | [] | Collection of BreadLists to render. |
| ItemTemplate | `RenderFragment<TItem>?` | null | The custom template content to render each item. |
| MaxDisplayedItems | `uint` | 0 | The maximum number of breadcrumbs to display before coalescing. If not specified, all breadcrumbs will be rendered. |
| NameSelectors | `BitBreadcrumbNameSelectors<TItem>?` | null | Names and selectors of the custom input type properties. |
| OnItemClick | `EventCallback<TItem>` | | Callback for when the breadcrumb item clicked. |
| Options | `RenderFragment?` | null | Alias of the ChildContent. |
| OverflowAriaLabel | `string?` | null | Aria label for the overflow button. |
| OverflowIndex | `uint` | 0 | Optional index where overflow items will be collapsed. |
| OverflowIcon | `BitIconInfo?` | null | Render a custom overflow icon in place of the default icon. |
| OverflowIconName | `string` | More | The overflow icon name. |
| OverflowIconTemplate | `RenderFragment?` | null | The custom template content to render each overflow icon. |
| OverflowTemplate | `RenderFragment<TItem>?` | null | The custom template content to render each item in overflow list. |
| ReversedIcon | `bool` | false | Reverses the positions of the icon and the item text of the item content. |
| Styles | `BitBreadcrumbClassStyles?` | null | Custom CSS styles for different parts of the breadcrumb. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitBreadcrumbItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Key | `string?` | | A unique value to use as a key of the breadcrumb item. |
| Text | `string?` | | Text to display in the breadcrumb item. |
| Href | `string?` | | URL to navigate to when the breadcrumb item is clicked. If provided, the breadcrumb will be rendered as a link. |
| Class | `string?` | | CSS class attribute for breadcrumb item. |
| Style | `string?` | | Style attribute for breadcrumb item. |
| Icon | `BitIconInfo?` | | Icon to render next to the item text. |
| IconName | `string?` | | Name of an icon to render next to the item text. |
| ReversedIcon | `bool?` | | Reverses the positions of the icon and the item text of the item content. |
| IsSelected | `bool` | | Display the item as the selected item. |
| IsEnabled | `bool` | true | Whether an item is enabled or not. |
| OnClick | `Action<BitBreadcrumbItem>?` | | Click event handler of the breadcrumb item. |
| OverflowTemplate | `RenderFragment<BitBreadcrumbItem>?` | | The custom template for the item in overflow list. |
| Template | `RenderFragment<BitBreadcrumbItem>?` | | The custom template for the item. |
### BitBreadcrumbOption Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Key | `string?` | | A unique value to use as a key of the breadcrumb option. |
| Text | `string?` | | Text to display in the breadcrumb option. |
| Href | `string?` | | URL to navigate to when the breadcrumb option is clicked. If provided, the breadcrumb will be rendered as a link. |
| Class | `string?` | | CSS class attribute for breadcrumb option. |
| Style | `string?` | | Style attribute for breadcrumb option. |
| Icon | `BitIconInfo?` | | Icon to render next to the item text. |
| IconName | `string?` | | Name of an icon to render next to the item text. |
| ReversedIcon | `bool?` | | Reverses the positions of the icon and the item text of the item content. |
| IsSelected | `bool` | | Display the breadcrumb option as the selected option. |
| IsEnabled | `bool` | true | Whether an option is enabled or not. |
| OnClick | `EventCallback<BitBreadcrumbOption>` | | Click event handler of the breadcrumb option. |
| OverflowTemplate | `RenderFragment<BitBreadcrumbItem>?` | | The custom template for the item in overflow list. |
| Template | `RenderFragment<BitBreadcrumbItem>?` | | The custom template for the item. |
### BitBreadcrumbClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitBreadcrumb. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitBreadcrumb. |
| ItemContainer | `string?` | null | Custom CSS classes/styles for the item container of the BitBreadcrumb. |
| OverflowButton | `string?` | null | Custom CSS classes/styles for the overflow button of the BitBreadcrumb. |
| OverflowButtonIcon | `string?` | null | Custom CSS classes/styles for the overflow button icon of the BitBreadcrumb. |
| ItemWrapper | `string?` | null | Custom CSS classes/styles for the item wrapper of the BitBreadcrumb. |
| Item | `string?` | null | Custom CSS classes/styles for each item of the BitBreadcrumb. |
| ItemIcon | `string?` | null | Custom CSS classes/styles for each item icon of the BitBreadcrumb. |
| ItemText | `string?` | null | Custom CSS classes/styles for each item text of the BitBreadcrumb. |
| SelectedItem | `string?` | null | Custom CSS classes/styles for the selected item of the BitBreadcrumb. |
| Divider | `string?` | null | Custom CSS classes/styles for the divider of the BitBreadcrumb. |
| DividerIcon | `string?` | null | Custom CSS classes/styles for the divider icon of the BitBreadcrumb. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout element of the BitBreadcrumb. |
| CalloutContainer | `string?` | null | Custom CSS classes/styles for the callout container of the BitBreadcrumb. |
| OverflowItemWrapper | `string?` | null | Custom CSS classes/styles for the overflow item wrapper of the BitBreadcrumb. |
| OverflowItem | `string?` | null | Custom CSS classes/styles for each overflow item of the BitBreadcrumb. |
| OverflowItemIcon | `string?` | null | Custom CSS classes/styles for each overflow item icon of the BitBreadcrumb. |
| OverflowItemText | `string?` | null | Custom CSS classes/styles for each overflow item text of the BitBreadcrumb. |
| OverflowSelectedItem | `string?` | null | Custom CSS classes/styles for the overflow selected item of the BitBreadcrumb. |
### BitBreadcrumbNameSelectors<TItem> Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Key | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.Key)) | The Id field name and selector of the custom input class. |
| Text | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.Text)) | The Text field name and selector of the custom input class. |
| Href | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.Href)) | The Href field name and selector of the custom input class. |
| Class | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.Class)) | The CSS Class field name and selector of the custom input class. |
| Style | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.Style)) | The CSS Style field name and selector of the custom input class. |
| Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitBreadcrumbItem.Icon)) | The Icon field name and selector of the custom input class. |
| IconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitBreadcrumbItem.IconName)) | The IconName field name and selector of the custom input class. |
| ReversedIcon | `BitNameSelectorPair<TItem, bool?>` | new(nameof(BitBreadcrumbItem.ReversedIcon)) | The ReversedIcon field name and selector of the custom input class. |
| IsSelected | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitBreadcrumbItem.IsSelected)) | The IsSelected field name and selector of the custom input class. |
| IsEnabled | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitBreadcrumbItem.IsEnabled)) | The IsEnabled field name and selector of the custom input class. |
| OnClick | `Action<TItem>?` | | Click event handler of the item. |
| OverflowTemplate | `BitNameSelectorPair<TItem, RenderFragment<TItem>?>` | new(nameof(BitBreadcrumbItem.OverflowTemplate)) | The OverflowTemplate field name and selector of the custom input class. |
| Template | `BitNameSelectorPair<TItem, RenderFragment<TItem>?>` | new(nameof(BitBreadcrumbItem.Template)) | The Template field name and selector of the custom input class. |
### BitNameSelectorPair<TItem, TProp> Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string` | | Custom class property name. |
| Selector | `Func<TItem, TProp?>?` | | Custom class property selector. |
### BitIconInfo Properties
Represents icon information for rendering icons. Supports built-in Fluent UI icons and external icon libraries (FontAwesome, Bootstrap Icons, etc.). Use BitIconInfo.Css("fa-solid fa-star"), BitIconInfo.Fa("solid star"), or BitIconInfo.Bi("star-fill") for external icons.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. For external icons, this can be the full CSS class name if BaseClass and Prefix are empty. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
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 }
];
```
\n**MaxDisplayedItems & OverflowIndex**:
```razor
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
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**Templates**:
```razor
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 => @ 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.FirstOrDefault(i => i.IsSelected).IsSelected = false;
item.IsSelected = true;
}
```
\n**Customizations**:
```razor
Add Item
Remove Item
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.FirstOrDefault(i => i.IsSelected).IsSelected = false;
item.IsSelected = true;
}
private void AddCustomItem()
{
ItemsCount++;
CustomBreadcrumbItemsWithCustomized.Add(new PageInfoModel()
{
Name = $"Item {ItemsCount}"
});
}
private void RemoveCustomItem()
{
if (CustomBreadcrumbItemsWithCustomized.Count > 1)
{
ItemsCount--;
var item = CustomBreadcrumbItemsWithCustomized[^1];
CustomBreadcrumbItemsWithCustomized.Remove(item);
if (item.IsCurrent)
{
CustomBreadcrumbItemsWithCustomized[^1].IsCurrent = true;
}
}
}
```
\n**External Icons**:
```razor
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**Class & Style**:
```razor
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
RtlBreadcrumbItems =
[
new() { Text = "پوشه اول" },
new() { Text = "پوشه دوم", IsSelected = true },
new() { Text = "پوشه سوم" },
new() { Text = "پوشه چهارم" },
new() { Text = "پوشه پنجم" },
new() { Text = "پوشه ششم" },
];
```
@item.Text
@item.Text
@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