Navigate to Tab in Page using Radzen

Radzen.Blazor Components
1

I couldn't find a good solution, so I created my own.

  1. Add an anchor to the Path. I used the # sign. This will display the Settings Page with the #tab1 as an anchor in the Url.

<RadzenLink Path="settings#tab1" Text="Go to Tab 1."/>

  1. Add this to your RadzenTabs code in your Page.

@bind-SelectedIndex=@_selectedTab

  1. In your Page, do this.
int _selectedTab = 0;

    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var uri = NavigationManager.Uri;

        //Get param from Url
        var param = uri.Substring(uri.IndexOf("#tab1") + 1);
        
        if (param == "tab1")
        {
            //Make Tab Active
            _selectedTab = 1;
        }

    }

Hope this helps!

2 Likes