Class SfBreadcrumb

Breadcrumb component is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites. The aim is to make the user aware of their current position in a hierarchy of website links.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfBreadcrumb

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfBreadcrumb : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Remarks

Breadcrumb items can be populated either by specifying Url property or by specifying BreadcrumbItem within BreadcrumbItems tag directive. ItemTemplate and SeparatorTemplate can be used to customize the Breadcrumb component UI using BreadcrumbTemplates tag directive.

Examples

In the below code example, a basic Breadcrumb component initialized with BreadcrumbItems tag directive.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Constructors

SfBreadcrumb()

Declaration

public SfBreadcrumb()

Properties

ActiveItem

Gets or sets the Url of the active breadcrumb item.

Declaration

[Parameter]
public string ActiveItem { get; set; }

Property Value

Type	Description
string	This property contains Url string of active breadcrumb item.

Remarks

This property is updated only when the Url has value.

Examples

<SfBreadcrumb>
    <BreadcrumbItems ActiveItem="@activeItem">
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private string activeItem = "https://blazor.syncfusion.com/demos/menu-bar/default-functionalities";
}

Disabled

Gets or sets whether the breadcrumb component is disabled or not.

Declaration

[Parameter]
public bool Disabled { get; set; }

Property Value

Type	Description
bool	true, if the breadcrumb component is disabled. The default value is false.

EnableActiveItemNavigation

Gets or sets whether the navigation is enabled for active item (last breadcrumb item).

Declaration

[Parameter]
public bool EnableActiveItemNavigation { get; set; }

Property Value

Type	Description
bool	true, if the navigation is enabled for last breadcrumb item and it is clickable. otherwise, false.The default value is false.

EnableNavigation

Gets or sets whether the built-in item navigation is enabled or not. The breadcrumb component navigates to url based on the item clicked by user.

Declaration

[Parameter]
public bool EnableNavigation { get; set; }

Property Value

Type	Description
bool	true, if built-in item navigation is enabled; otherwise, false.The default value is true.

Remarks

You can handle navigation in using ItemClicked event by setting EnableNavigation as false.

EnablePersistence

Gets or sets whether to persist component's state between page reloads. When set to true, the ActiveItem property is persisted.

Declaration

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	true, if the component's state persistence is enabled. The default value is false.

Remarks

Component's ActiveItem property will be stored in browser local storage to persist component's state when page reloads.

EnableRtl

Gets or sets whether the right to left direction is enabled for breadcrumb component.

Declaration

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	true, if the right to left direction is enabled for breadcrumb component. The default value is false.

ItemClicked

Gets or sets an event callback that is raised when the BreadcrumbItem is clicked.

Declaration

[Parameter]
public EventCallback<BreadcrumbClickedEventArgs> ItemClicked { get; set; }

Property Value

Type	Description
EventCallback<BreadcrumbClickedEventArgs>	An event callback function.

Remarks

You can customize the item navigation using BreadcrumbClickedEventArgs by setting EnableNavigation as false. The event is raised for UI based click only.

Examples

@inject NavigationManager NavigationManager
<SfBreadcrumb ItemClicked="@ItemClicked" EnableNavigation="false">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Program Files" Url="programfiles"></BreadcrumbItem>
        <BreadcrumbItem Text="Commom Files" Url="commomfiles"></BreadcrumbItem>
        <BreadcrumbItem Text="Services" Url="services"></BreadcrumbItem>
        <BreadcrumbItem Text="Config" Url="config"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private void ItemClicked(BreadcrumbClickedEventArgs args) {
        NavigationManager.NavigateTo(args.Item.Url);
    }
}

ItemRendering

Gets or sets an event callback that is raised while rendering BreadcrumbItem.

Declaration

[Parameter]
public EventCallback<BreadcrumbItemRenderingEventArgs> ItemRendering { get; set; }

Property Value

Type	Description
EventCallback<BreadcrumbItemRenderingEventArgs>	An event callback function.

Remarks

You can customize the breadcrumb items rendering using BreadcrumbItemRenderingEventArgs.

Examples

In the below code example, the breadcrumb item text is changed to lower casing using ItemRendering event.

<SfBreadcrumb ItemRendering="@ItemRendering">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Program Files"></BreadcrumbItem>
        <BreadcrumbItem Text="Commom Files"></BreadcrumbItem>
        <BreadcrumbItem Text="Services"></BreadcrumbItem>
        <BreadcrumbItem Text="Config.json"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private void ItemRendering(BreadcrumbItemRenderingEventArgs args) {
        args.Item.Text = args.Item.Text.ToLower();
    }
}

Items

Gets or sets the list of breadcrumb items that will be populated using the BreadcrumbItems tag directive.

Declaration

[Parameter]
public List<BreadcrumbItem> Items { get; set; }

Property Value

Type	Description
List<BreadcrumbItem>	BreadcrumbItems

MaxItems

Gets or sets the maximum number of breadcrumb items to be visible in the breadcrumb component. If the number of items exceeds this count, then items are rendered based on OverflowMode property.

Declaration

[Parameter]
public int MaxItems { get; set; }

Property Value

Type	Description
int	The number of breadcrumb items to be visible in breadcrumb component. The default value is 0.

Remarks

The MaxItems is applicable only if the number of BreadcrumbItem is greater than 2.

OverflowMode

Gets or sets a value that indicates how to display breadcrumb items when the breadcrumb items count exceeds MaxItems.

Declaration

[Parameter]
public BreadcrumbOverflowMode OverflowMode { get; set; }

Property Value

Type	Description
BreadcrumbOverflowMode	One of the BreadcrumbOverflowMode enumeration. The default value is Menu

Remarks

If the OverflowMode is Hidden, the exceeded items will be hidden and while clicking on the previous item, the hidden item will become visible. If the OverflowMode is Collapsed, only the first and last items will be visible, and the remaining items will be hidden with collapsed icon. When the collapsed icon is clicked, all items become visible and scroll will be enabled if the space is not enough to show all items. If the OverflowMode is Menu, it shows the number of breadcrumb items that can be accommodated within the container space, and creates a sub menu with the remaining items. If the OverflowMode is Wrap, it wraps the items on multiple lines when the Breadcrumb�s width exceeds the container space. If the OverflowMode is Scroll, it shows an HTML scroll bar when the Breadcrumb�s width exceeds the container space. If the OverflowMode is None, it shows all the items on a single line.

Url

Gets or sets the Url based on which the Breadcrumb items are generated.

Declaration

[Parameter]
public string Url { get; set; }

Property Value

Type	Description
string	The value as a Url string to generate Breadcrumb items. The default value is String.Empty.

Remarks

You can specify only absolute Url to this property.

Examples

<SfBreadcrumb Url="https://blazor.syncfusion.com/demos/breadcrumb/navigation">
</SfBreadcrumb>

See Also

BreadcrumbItems

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
Task

Overrides

ComponentBase.OnParametersSetAsync()

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
bool

Overrides

ComponentBase.ShouldRender()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable